@bpmn-io/form-js-editor 1.0.0 → 1.1.0

package/dist/index.es.js

@@ -934,15 +934,15 @@ function useService$1 (type, strict) {
   return getService(type, strict);
 }
 
-var _path$3;
-function _extends$3() { _extends$3 = 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$3.apply(this, arguments); }
+var _path$4;
+function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
 var SvgClose = function SvgClose(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     fill: "currentColor"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "m12 4.7-.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",
     clipRule: "evenodd"
@@ -950,10 +950,10 @@ var SvgClose = function SvgClose(props) {
 };
 var CloseIcon = SvgClose;
 
-var _path$2, _path2;
-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 _path$3, _path2$1;
+function _extends$3() { _extends$3 = 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$3.apply(this, arguments); }
 var SvgDelete = function SvgDelete(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -974,27 +974,27 @@ var SvgDelete = function SvgDelete(props) {
       mixBlendMode: "multiply"
     },
     transform: "translate(.536)"
-  }), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+  }), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
     fill: "currentcolor",
     d: "M7.536 6h-1v6h1V6Zm3 0h-1v6h1V6Z"
-  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
     fill: "currentcolor",
     d: "M2.536 3v1h1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4h1V3h-12Zm2 11V4h8v10h-8Zm6-13h-4v1h4V1Z"
   })));
 };
 var DeleteIcon$1 = SvgDelete;
 
-var _path$1;
-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 _path$2;
+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 SvgDraggable = function SvgDraggable(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     xmlSpace: "preserve",
     width: 16,
     height: 16,
     fill: "currentcolor",
     viewBox: "0 0 32 32"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
     d: "M10 6h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4z"
   })), /*#__PURE__*/React.createElement("path", {
     d: "M0 0h32v32H0z",
@@ -1005,21 +1005,76 @@ var SvgDraggable = function SvgDraggable(props) {
 };
 var DraggableIcon = SvgDraggable;
 
-var _path;
-function _extends() { _extends = 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.apply(this, arguments); }
+var _path$1;
+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 SvgSearch = function SvgSearch(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 15,
     height: 15,
     fill: "none"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "m14.5 13.793-3.776-3.776a5.508 5.508 0 1 0-.707.707l3.776 3.776.707-.707ZM2 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"
   })));
 };
 var SearchIcon = SvgSearch;
 
+var _path, _rect, _mask, _path2, _path3, _path4, _path5, _path6;
+function _extends() { _extends = 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.apply(this, arguments); }
+var SvgEmptyForm = function SvgEmptyForm(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 126,
+    height: 96,
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "#FF832B",
+    fillRule: "evenodd",
+    d: "M70 78v8a3 3 0 0 1-3 3h-8v-5h6v-6h5Zm0-16h-5V46h5v16Zm0-32h-5v-6h-6v-5h8a3 3 0 0 1 3 3v8ZM43 19v5H27v-5h16Zm-32 0v5H5v6H0v-8a3 3 0 0 1 3-3h8ZM0 46h5v16H0V46Zm0 32h5v6h6v5H3a3 3 0 0 1-3-3v-8Zm27 11v-5h16v5H27Z",
+    clipRule: "evenodd"
+  })), _rect || (_rect = /*#__PURE__*/React.createElement("rect", {
+    width: 70,
+    height: 70,
+    fill: "#E5E5E5",
+    rx: 3,
+    transform: "matrix(-1 0 0 1 94 0)"
+  })), _mask || (_mask = /*#__PURE__*/React.createElement("mask", {
+    id: "EmptyForm_svg__a",
+    fill: "#fff"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M87.085 88.684 75.43 45.185l43.499 11.656-11.044 8.072 8.557 8.556-12.728 12.728-8.557-8.556-8.072 11.043Z",
+    clipRule: "evenodd"
+  }))), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    fill: "#393939",
+    fillRule: "evenodd",
+    d: "M87.085 88.684 75.43 45.185l43.499 11.656-11.044 8.072 8.557 8.556-12.728 12.728-8.557-8.556-8.072 11.043Z",
+    clipRule: "evenodd"
+  })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
+    fill: "#393939",
+    d: "M75.43 45.185 70.6 46.48l-2.241-8.365 8.365 2.242-1.294 4.83Zm11.655 43.499 4.037 2.95-6.163 8.432-2.704-10.088 4.83-1.294Zm31.844-31.843 1.294-4.83 10.088 2.703-8.432 6.163-2.95-4.036Zm-11.044 8.072-3.535 3.535-4.128-4.127 4.713-3.445 2.95 4.037Zm8.557 8.556 3.535-3.535 3.536 3.535-3.536 3.536-3.535-3.536Zm-12.728 12.728 3.536 3.536-3.536 3.535-3.536-3.535 3.536-3.536Zm-8.557-8.556-4.036-2.951 3.444-4.713 4.128 4.128-3.536 3.535ZM80.26 43.89 91.915 87.39l-9.66 2.588L70.6 46.48l9.66-2.588Zm37.375 17.78L74.136 50.014l2.588-9.66 43.499 11.656-2.589 9.66Zm-12.699-.795 11.043-8.072 5.901 8.073-11.043 8.072-5.901-8.073Zm7.971 16.129-8.556-8.557 7.071-7.07 8.556 8.556-7.071 7.07Zm-12.728 5.657 12.728-12.728 7.071 7.07-12.727 12.729-7.072-7.071Zm-1.485-8.557 8.557 8.557-7.072 7.07-8.556-8.556 7.07-7.071ZM83.049 85.733 91.12 74.69l8.073 5.901-8.072 11.044-8.073-5.902Z",
+    mask: "url(#EmptyForm_svg__a)"
+  })), _path4 || (_path4 = /*#__PURE__*/React.createElement("path", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeWidth: 3,
+    d: "m69.431 39.163-9.192-9.192"
+  })), _path5 || (_path5 = /*#__PURE__*/React.createElement("path", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeWidth: 3,
+    d: "M1.5-1.5h8",
+    transform: "matrix(-1 0 0 1 68.213 50.123)"
+  })), _path6 || (_path6 = /*#__PURE__*/React.createElement("path", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeWidth: 3,
+    d: "M78.969 36.367v-8"
+  })));
+};
+var EmptyFormIcon = SvgEmptyForm;
+
 function EditorText(props) {
   const {
     type,
@@ -1028,7 +1083,7 @@ function EditorText(props) {
   const Icon = iconsByType('text');
   const templating = useService$1('templating');
   const expressionLanguage = useService$1('expressionLanguage');
-  if (!text) {
+  if (!text || !text.trim()) {
     return jsx("div", {
       class: editorFormFieldClasses(type),
       children: jsxs("div", {
@@ -1929,7 +1984,19 @@ function ContextPad(props) {
   });
 }
 function Empty(props) {
-  return null;
+  return jsx("div", {
+    class: "fjs-empty-editor",
+    children: jsxs("div", {
+      class: "fjs-empty-editor-card",
+      children: [jsx(EmptyFormIcon, {}), jsx("h2", {
+        children: "Build your form"
+      }), jsx("span", {
+        children: "Drag and drop components here to start designing."
+      }), jsx("span", {
+        children: "Use the preview window to test your form."
+      })]
+    })
+  });
 }
 function Element$1(props) {
   const eventBus = useService$1('eventBus'),
@@ -6089,11 +6156,9 @@ function NumberFieldEntry(props) {
     onBlur,
     validate
   } = props;
-  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;
@@ -6105,16 +6170,9 @@ function NumberFieldEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -6561,11 +6619,9 @@ function FeelEntry(props) {
     onFocus,
     onBlur
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const [validationError, setValidationError] = useState(null);
   const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -6577,22 +6633,16 @@ function FeelEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      // don't create multiple commandStack entries for the same value
-      if (newValue !== value) {
-        setValue(newValue);
-      }
+
+    // don't create multiple commandStack entries for the same value
+    if (newValue !== value) {
+      setValue(newValue, newValidationError);
     }
     setValidationError(newValidationError);
   });
   const onError = useCallback(err => {
     setLocalError(err);
   }, []);
-  if (previousValue === value && validationError) {
-    value = cachedInvalidValue;
-  }
   const temporaryError = useError(id);
   const error = localError || temporaryError || validationError;
   return jsxs("div", {
@@ -6823,11 +6873,9 @@ function SelectEntry(props) {
     validate
   } = props;
   const options = getOptions(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;
@@ -6839,16 +6887,9 @@ function SelectEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -6979,11 +7020,9 @@ function TextAreaEntry(props) {
     onBlur,
     autoResize
   } = props;
-  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;
@@ -6995,16 +7034,9 @@ function TextAreaEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -7119,11 +7151,9 @@ function TextfieldEntry(props) {
     onFocus,
     onBlur
   } = props;
-  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;
@@ -7135,16 +7165,9 @@ function TextfieldEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -7229,6 +7252,7 @@ const labelsByType = {
   number: 'NUMBER',
   radio: 'RADIO',
   select: 'SELECT',
+  spacer: 'SPACER',
   taglist: 'TAGLIST',
   text: 'TEXT VIEW',
   textfield: 'TEXT FIELD',
@@ -7431,7 +7455,10 @@ function Columns(props) {
   const validate = value => {
     return formLayoutValidator.validateField(field, value ? parseInt(value) : null);
   };
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     const layout = get(field, ['layout'], {});
     const newValue = value ? parseInt(value) : null;
     editField(field, ['layout'], set$1(layout, ['columns'], newValue));
@@ -7639,7 +7666,10 @@ function DefaultValueNumber(props) {
     // Enforces decimal notation so that we do not submit defaults in exponent form
     return serializeToString ? Big(value).toFixed() : value;
   };
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     let newValue;
     if (isValidNumber(value)) {
       newValue = serializeToString ? value : Number(value);
@@ -7830,7 +7860,10 @@ function Id(props) {
   const getValue = () => {
     return get(field, path, '');
   };
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     return editField(field, path, value);
   };
   const validate = value => {
@@ -7910,7 +7943,10 @@ function Key$1(props) {
   const getValue = () => {
     return get(field, path, '');
   };
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     return editField(field, path, value);
   };
   const validate = value => {
@@ -8165,7 +8201,7 @@ function Text(props) {
     return get(field, path, '');
   };
   const setValue = value => {
-    return editField(field, path, value);
+    return editField(field, path, value || '');
   };
   const description = useMemo(() => jsxs(Fragment$1, {
     children: ["Supports markdown and templating. ", jsx("a", {
@@ -8187,6 +8223,57 @@ function Text(props) {
   });
 }
 
+function SpacerEntry(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const {
+    type
+  } = field;
+  if (type !== 'spacer') {
+    return [];
+  }
+  const entries = [];
+  entries.push({
+    id: id + '-height',
+    component: SpacerHeight,
+    isEdited: isEdited$6,
+    editField,
+    field
+  });
+  return entries;
+}
+function SpacerHeight(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const getValue = e => get(field, ['height']);
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, ['height'], value);
+  };
+  return NumberFieldEntry({
+    debounce,
+    label: 'Height',
+    element: field,
+    id,
+    getValue,
+    setValue,
+    validate: value => {
+      if (value === undefined || value === null) return;
+      if (value < 1) return 'Should be greater than zero.';
+      if (!Number.isInteger(value)) return 'Should be an integer.';
+    }
+  });
+}
+
 function NumberEntries(props) {
   const {
     editField,
@@ -8224,7 +8311,12 @@ function NumberDecimalDigits(props) {
   } = props;
   const debounce = useService('debounce');
   const getValue = e => get(field, ['decimalDigits']);
-  const setValue = value => editField(field, ['decimalDigits'], value);
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, ['decimalDigits'], value);
+  };
   return NumberFieldEntry({
     debounce,
     label: 'Decimal digits',
@@ -8260,7 +8352,12 @@ function NumberArrowStep(props) {
     const trimmed = value.replace(/^0+/g, '');
     return (trimmed.startsWith('.') ? '0' : '') + trimmed;
   };
-  const setValue = value => editField(field, ['increment'], clearLeadingZeroes(value));
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, ['increment'], clearLeadingZeroes(value));
+  };
   const decimalDigitsSet = decimalDigits || decimalDigits === 0;
   return TextfieldEntry({
     debounce,
@@ -8669,7 +8766,10 @@ function Label(props) {
     validateFactory
   } = props;
   const debounce = useService('debounce');
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     const values = get(field, ['values']);
     return editField(field, 'values', set$1(values, [index, 'label'], value));
   };
@@ -8695,7 +8795,10 @@ function Value$1(props) {
     validateFactory
   } = props;
   const debounce = useService('debounce');
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     const values = get(field, ['values']);
     return editField(field, 'values', set$1(values, [index, 'value'], value));
   };
@@ -8749,7 +8852,10 @@ function Key(props) {
     validateFactory
   } = props;
   const debounce = useService('debounce');
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     const properties = get(field, ['properties']);
     const key = Object.keys(properties)[index];
     return editField(field, 'properties', updateKey(properties, key, value));
@@ -8960,7 +9066,12 @@ function InputValuesKey(props) {
   const debounce = useService('debounce');
   const path = VALUES_SOURCES_PATHS[VALUES_SOURCES.INPUT];
   const getValue = () => get(field, path, '');
-  const setValue = value => editField(field, path, value || '');
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, path, value || '');
+  };
   const validate = value => {
     if (isUndefined(value) || !value.length) {
       return 'Must not be empty.';
@@ -9317,6 +9428,9 @@ function GeneralGroup(field, editField, getService) {
     field,
     editField,
     getService
+  }), ...SpacerEntry({
+    field,
+    editField
   }), ...NumberEntries({
     field,
     editField