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

package/dist/assets/form-js.css

@@ -178,6 +178,8 @@
   width: auto !important;
   min-width: 34px;
   text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .fjs-container .fjs-input-adornment svg {
@@ -221,6 +223,10 @@
   width: 100%;
 }
 
+.fjs-container .fjs-form-field-datetime .fjs-input-adornment svg {
+  color: var(--color-black);
+}
+
 .fjs-container .fjs-datetime-separator {
   width: 10px;
 }
@@ -228,21 +234,11 @@
 .fjs-container .fjs-input-group {
   display: flex;
   width: 100%;
-  margin: 4px, 0;
+  margin: 4px 0;
   border: var(--border-definition);
   border-radius: 3px;
 }
 
-.fjs-container .fjs-input-group.disabled {
-  background-color: var(--color-background-disabled);
-}
-
-.fjs-container .fjs-input-group.disabled,
-.fjs-container .fjs-input-group.disabled .fjs-input,
-.fjs-container .fjs-input-group.disabled .fjs-input-adornment {
-  border-color: var(--color-borders-disabled);
-}
-
 .fjs-container .fjs-taglist .fjs-taglist-input,
 .fjs-container .fjs-input-group .fjs-input {
   border: none;
@@ -322,9 +318,7 @@
   color: var(--color-text);
 }
 
-.fjs-container .fjs-number-arrow-container.disabled button {
-  background-color: var(--color-grey-225-10-95);
-}
+
 
 .fjs-container .fjs-radio {
   display: flex;
@@ -388,6 +382,8 @@
 .fjs-container .fjs-input:disabled,
 .fjs-container .fjs-textarea:disabled,
 .fjs-container .fjs-select:disabled,
+.fjs-container .fjs-number-arrow-container.disabled button,
+.fjs-container .fjs-input-group.disabled,
 .fjs-container .fjs-taglist.disabled {
   background-color: var(--color-background-disabled);
   border-color: var(--color-borders-disabled);
@@ -400,6 +396,11 @@
   border-color: var(--color-borders-disabled);
 }
 
+.fjs-container .fjs-input-group.disabled .fjs-input,
+.fjs-container .fjs-input-group.disabled .fjs-input-adornment {
+  border-color: var(--color-borders-disabled);
+}
+
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
@@ -459,15 +460,11 @@
   gap: 5px;
   border: var(--color-borders) solid 1px;
   border-radius: 3px;
+  margin: 4px 0;
   padding: 5px;
   background-color: var(--color-background);
 }
 
-.fjs-container .fjs-taglist.disabled {
-  border: var(--color-borders-disabled) solid 1px;
-  background-color: var(--color-background-disabled);
-}
-
 .fjs-container .fjs-taglist .fjs-taglist-tag {
   display: flex;
   overflow: hidden;
@@ -567,54 +564,55 @@
 
 .fjs-container .fjs-image-placeholder {
   height: 64px;
-  margin: 2px 0;
+  margin: 4px 0;
 }
 
 /**
 * Flatpickr style adjustments
 */
 
-.flatpickr-day.today {
-  border-color: transparent !important;
-  background-color: transparent !important;
-  font-weight: bold !important;
+.fjs-container .flatpickr-day.today {
+  border-color: transparent;
+  background-color: transparent;
+  font-weight: bold;
 }
 
-.flatpickr-day.today:hover,
-.flatpickr-day.today:focus {
-  border-color: var(--color-borders) !important;
-  background-color: var(--color-datepicker-focused-day) !important;
-  color: var(--color-text-inverted) !important;
+.fjs-container .flatpickr-day.today:hover,
+.fjs-container .flatpickr-day.today:focus {
+  border-color: var(--color-borders);
+  background-color: var(--color-datepicker-focused-day);
+  color: var(--color-text-inverted);
 }
 
-.flatpickr-day.selected {
-  border-color: var(--color-accent) !important;
-  background-color: inherit !important;
-  color: inherit !important;
-  font-weight: normal !important;
+.fjs-container .flatpickr-day.selected {
+  border-color: var(--color-accent);
+  background-color: inherit;
+  color: inherit;
+  font-weight: normal;
 }
 
-.flatpickr-day.selected.today {
-  font-weight: bold !important;
+.fjs-container .flatpickr-day.selected.today {
+  font-weight: bold;
 }
 
-.flatpickr-day.selected:hover,
-.flatpickr-day.selected:focus {
-  background-color: var(--color-accent) !important;
-  font-weight: bold !important; 
-  color: var(--color-text-inverted) !important;
+.fjs-container .flatpickr-day.selected:hover,
+.fjs-container .flatpickr-day.selected:focus {
+  background-color: var(--color-accent);
+  font-weight: bold; 
+  color: var(--color-text-inverted);
+  border-color: var(--color-accent);
 }
 
-.flatpickr-days, .flatpickr-weekdays {
-  padding: 10px !important;
-  width: 100% !important;
+.fjs-container .flatpickr-days, .flatpickr-weekdays {
+  padding: 10px;
+  width: 100%;
 }
 
 .fjs-container .flatpickr-calendar.hasTime.noCalendar {
-  width: auto !important;
-  max-width: 250px !important;
+  width: auto;
+  max-width: 250px;
 }
 
-.flatpickr-calendar {
-  width: 326px !important;
+.fjs-container .flatpickr-calendar {
+  width: 326px;
 }

package/dist/index.cjs

@@ -616,7 +616,7 @@ class Validator {
     if (type === 'number') {
       const {
         decimalDigits,
-        step
+        increment
       } = field;
       if (value === 'NaN') {
         errors = [...errors, 'Value is not a number.'];
@@ -624,13 +624,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__default['default'](value);
-          const bigStep = Big__default['default'](step);
-          const offset = bigValue.mod(bigStep);
+          const bigIncrement = Big__default['default'](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}.`];
           }
         }
@@ -645,10 +645,10 @@ class Validator {
     if (validate.required && (minDash.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) {
@@ -1874,7 +1874,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) {
@@ -1939,10 +1939,6 @@ function Datepicker(props) {
 
   // setup flatpickr instance
   hooks.useEffect(() => {
-    if (disabled) {
-      setFlatpickrInstance(null);
-      return;
-    }
     let config = {
       allowInput: true,
       dateFormat: 'm/d/Y',
@@ -1975,7 +1971,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
   hooks.useEffect(() => {
@@ -2064,12 +2060,12 @@ var ClockIcon = (({
   xmlns: "http://www.w3.org/2000/svg"
 }, props), /*#__PURE__*/React__default['default'].createElement("path", {
   d: "M13 14.41L18.59 20 20 18.59l-5-5.01V5h-2v9.41z",
-  fill: "#000"
+  fill: "currentColor"
 }), /*#__PURE__*/React__default['default'].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) {
@@ -2161,6 +2157,7 @@ function DropdownList(props) {
     ref: dropdownContainer,
     tabIndex: -1,
     class: "fjs-dropdownlist",
+    onMouseDown: e => e.preventDefault(),
     style: {
       maxHeight: height,
       scrollBehavior: smoothScrolling ? 'smooth' : 'auto'
@@ -2172,10 +2169,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 && jsxRuntime.jsx("div", {
@@ -2375,31 +2369,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 = hooks.useCallback(({
     date,
     time
@@ -2789,6 +2781,7 @@ function Numberfield(props) {
   }), [stringValueCache, value, field]);
   const displayValue = hooks.useMemo(() => {
     if (value === 'NaN') return 'NaN';
+    if (stringValueCache === '-') return '-';
     return cacheValueMatchesState ? stringValueCache : value || value === 0 ? Big__default['default'](value).toFixed() : '';
   }, [stringValueCache, value, cacheValueMatchesState]);
   const arrowIncrementValue = hooks.useMemo(() => {
@@ -2808,6 +2801,10 @@ function Numberfield(props) {
 
     // treat commas as dots
     stringValue = stringValue.replaceAll(',', '.');
+    if (stringValue === '-') {
+      setStringValueCache('-');
+      return;
+    }
     if (isNaN(Number(stringValue))) {
       setStringValueCache('NaN');
       onChange({
@@ -2912,6 +2909,7 @@ function Numberfield(props) {
           }),
           children: [jsxRuntime.jsx("button", {
             class: "fjs-number-arrow-up",
+            type: "button",
             onClick: () => increment(),
             tabIndex: -1,
             children: "\u02C4"
@@ -2919,6 +2917,7 @@ function Numberfield(props) {
             class: "fjs-number-arrow-separator"
           }), jsxRuntime.jsx("button", {
             class: "fjs-number-arrow-down",
+            type: "button",
             onClick: () => decrement(),
             tabIndex: -1,
             children: "\u02C5"
@@ -3336,18 +3335,18 @@ var ChecklistIcon = (({
   styles = {},
   ...props
 }) => /*#__PURE__*/React__default['default'].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__default['default'].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__default['default'].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); }