@bpmn-io/form-js-viewer 0.10.0 → 0.11.0

package/dist/index.es.js

@@ -602,7 +602,7 @@ class Validator {
     if (type === 'number') {
       const {
         decimalDigits,
-        step
+        increment
       } = field;
       if (value === 'NaN') {
         errors = [...errors, 'Value is not a number.'];
@@ -610,13 +610,13 @@ class Validator {
         if (decimalDigits >= 0 && countDecimals(value) > decimalDigits) {
           errors = [...errors, 'Value is expected to ' + (decimalDigits === 0 ? 'be an integer' : `have at most ${decimalDigits} decimal digit${decimalDigits > 1 ? 's' : ''}`) + '.'];
         }
-        if (step) {
+        if (increment) {
           const bigValue = Big(value);
-          const bigStep = Big(step);
-          const offset = bigValue.mod(bigStep);
+          const bigIncrement = Big(increment);
+          const offset = bigValue.mod(bigIncrement);
           if (offset.cmp(0) !== 0) {
             const previousValue = bigValue.minus(offset);
-            const nextValue = previousValue.plus(bigStep);
+            const nextValue = previousValue.plus(bigIncrement);
             errors = [...errors, `Please select a valid value, the two nearest valid values are ${previousValue} and ${nextValue}.`];
           }
         }
@@ -631,10 +631,10 @@ class Validator {
     if (validate.required && (isNil(value) || value === '')) {
       errors = [...errors, 'Field is required.'];
     }
-    if ('min' in validate && value && value < validate.min) {
+    if ('min' in validate && (value || value === 0) && value < validate.min) {
       errors = [...errors, `Field must have minimum value of ${validate.min}.`];
     }
-    if ('max' in validate && value && value > validate.max) {
+    if ('max' in validate && (value || value === 0) && value > validate.max) {
       errors = [...errors, `Field must have maximum value of ${validate.max}.`];
     }
     if ('minLength' in validate && value && value.trim().length < validate.minLength) {
@@ -1860,7 +1860,7 @@ var CalendarIcon = (({
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M19 2H9V0H7v2H2a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V4a2 2 0 00-2-2h-5V0h-2v2zM7 7V4H2v5h24V4h-5v3h-2V4H9v3H7zm-5 4v17h24V11H2z",
-  fill: "#000"
+  fill: "currentColor"
 })));
 
 function InputAdorner(props) {
@@ -1925,10 +1925,6 @@ function Datepicker(props) {
 
   // setup flatpickr instance
   useEffect(() => {
-    if (disabled) {
-      setFlatpickrInstance(null);
-      return;
-    }
     let config = {
       allowInput: true,
       dateFormat: 'm/d/Y',
@@ -1961,7 +1957,7 @@ function Datepicker(props) {
     // flatpicker logic that was lost when setting allowInput to true
     instance.config.onOpen = [() => instance.calendarContainer.addEventListener('focusout', onCalendarFocusOut), () => instance.calendarContainer.addEventListener('mousedown', onCalendarMouseDown)];
     instance.config.onClose = [() => instance.calendarContainer.removeEventListener('focusout', onCalendarFocusOut), () => instance.calendarContainer.removeEventListener('mousedown', onCalendarMouseDown)];
-  }, [disabled, disallowPassedDates]);
+  }, [disallowPassedDates]);
 
   // onChange is updated dynamically, so not to re-render the flatpicker every time it changes
   useEffect(() => {
@@ -2050,12 +2046,12 @@ var ClockIcon = (({
   xmlns: "http://www.w3.org/2000/svg"
 }, props), /*#__PURE__*/React.createElement("path", {
   d: "M13 14.41L18.59 20 20 18.59l-5-5.01V5h-2v9.41z",
-  fill: "#000"
+  fill: "currentColor"
 }), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M6.222 25.64A14 14 0 1021.778 2.36 14 14 0 006.222 25.64zM7.333 4.023a12 12 0 1113.334 19.955A12 12 0 017.333 4.022z",
-  fill: "#000"
+  fill: "currentColor"
 })));
 
 function useKeyDownAction(targetKey, action, listenerElement = window) {
@@ -2147,6 +2143,7 @@ function DropdownList(props) {
     ref: dropdownContainer,
     tabIndex: -1,
     class: "fjs-dropdownlist",
+    onMouseDown: e => e.preventDefault(),
     style: {
       maxHeight: height,
       scrollBehavior: smoothScrolling ? 'smooth' : 'auto'
@@ -2158,10 +2155,7 @@ function DropdownList(props) {
         }),
         onMouseMove: mouseControl ? undefined : e => onMouseMovedInKeyboardMode(e, i),
         onMouseEnter: mouseControl ? () => setFocusedValueIndex(i) : undefined,
-        onMouseDown: e => {
-          e.preventDefault();
-          onValueSelected(v);
-        },
+        onMouseDown: e => onValueSelected(v),
         children: getLabel(v)
       });
     }), !values.length && jsx("div", {
@@ -2361,31 +2355,29 @@ function Datetime(props) {
       date,
       time
     } = getNullDateTime();
-    if (!disabled) {
-      switch (subtype) {
-        case DATETIME_SUBTYPES.DATE:
-          {
-            date = new Date(Date.parse(value));
-            break;
-          }
-        case DATETIME_SUBTYPES.TIME:
-          {
-            time = parseIsoTime(value);
-            break;
-          }
-        case DATETIME_SUBTYPES.DATETIME:
-          {
-            date = new Date(Date.parse(value));
-            time = isValidDate(date) ? 60 * date.getHours() + date.getMinutes() : null;
-            break;
-          }
-      }
+    switch (subtype) {
+      case DATETIME_SUBTYPES.DATE:
+        {
+          date = new Date(Date.parse(value));
+          break;
+        }
+      case DATETIME_SUBTYPES.TIME:
+        {
+          time = parseIsoTime(value);
+          break;
+        }
+      case DATETIME_SUBTYPES.DATETIME:
+        {
+          date = new Date(Date.parse(value));
+          time = isValidDate(date) ? 60 * date.getHours() + date.getMinutes() : null;
+          break;
+        }
     }
     setDateTime({
       date,
       time
     });
-  }, [subtype, value, disabled]);
+  }, [subtype, value]);
   const computeAndSetState = useCallback(({
     date,
     time
@@ -2775,6 +2767,7 @@ function Numberfield(props) {
   }), [stringValueCache, value, field]);
   const displayValue = useMemo(() => {
     if (value === 'NaN') return 'NaN';
+    if (stringValueCache === '-') return '-';
     return cacheValueMatchesState ? stringValueCache : value || value === 0 ? Big(value).toFixed() : '';
   }, [stringValueCache, value, cacheValueMatchesState]);
   const arrowIncrementValue = useMemo(() => {
@@ -2794,6 +2787,10 @@ function Numberfield(props) {
 
     // treat commas as dots
     stringValue = stringValue.replaceAll(',', '.');
+    if (stringValue === '-') {
+      setStringValueCache('-');
+      return;
+    }
     if (isNaN(Number(stringValue))) {
       setStringValueCache('NaN');
       onChange({
@@ -2898,6 +2895,7 @@ function Numberfield(props) {
           }),
           children: [jsx("button", {
             class: "fjs-number-arrow-up",
+            type: "button",
             onClick: () => increment(),
             tabIndex: -1,
             children: "\u02C4"
@@ -2905,6 +2903,7 @@ function Numberfield(props) {
             class: "fjs-number-arrow-separator"
           }), jsx("button", {
             class: "fjs-number-arrow-down",
+            type: "button",
             onClick: () => decrement(),
             tabIndex: -1,
             children: "\u02C5"
@@ -3322,18 +3321,18 @@ var ChecklistIcon = (({
   styles = {},
   ...props
 }) => /*#__PURE__*/React.createElement("svg", _extends$b({
+  xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
+  fill: "none"
 }, props), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
-  d: "M19 24h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zm6 18h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zm6-30h-6v6h6V8zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2V8a2 2 0 00-2-2h-6z",
-  fill: "#22242A"
+  d: "M18 12h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zM18 36h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zM18 24h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6z",
+  fill: "#161616"
 }), /*#__PURE__*/React.createElement("path", {
-  d: "M26 26a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2zm0 16a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2zm0-32a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2z",
-  fill: "#22242A"
+  d: "M23 14.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1zM23 26.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1zM23 38.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1z",
+  fill: "#161616"
 })));
 
 function _extends$a() { _extends$a = 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$a.apply(this, arguments); }