@bpmn-io/form-js-viewer 1.6.1 → 1.6.2

package/dist/index.cjs

@@ -7,6 +7,7 @@ var classNames = require('classnames');
 var jsxRuntime = require('preact/jsx-runtime');
 var hooks = require('preact/hooks');
 var preact = require('preact');
+var isEqual = require('lodash/isEqual');
 var flatpickr = require('flatpickr');
 var React = require('preact/compat');
 var Markup = require('preact-markup');
@@ -1104,39 +1105,58 @@ function getOptionsData(formField, formData) {
 
 // transforms the provided options into a normalized format, trimming invalid options
 function normalizeOptionsData(optionsData) {
-  return optionsData.filter(_isOptionSomething).map(v => _normalizeOptionsData(v)).filter(v => v);
+  return optionsData.filter(_isAllowedValue).map(_normalizeOption).filter(o => !minDash.isNil(o));
 }
-function _normalizeOptionsData(optionData) {
-  if (_isAllowedOption(optionData)) {
-    // if a primitive is provided, use it as label and value
+
+/**
+ * Converts the provided option to a normalized format.
+ * If the option is not valid, null is returned.
+ *
+ * @param {object} option
+ * @param {string} option.label
+ * @param {*} option.value
+ *
+ * @returns
+ */
+function _normalizeOption(option) {
+  // (1) simple primitive case, use it as both label and value
+  if (_isAllowedPrimitive(option)) {
     return {
-      value: optionData,
-      label: `${optionData}`
+      value: option,
+      label: `${option}`
     };
   }
-  if (typeof optionData === 'object') {
-    if (!optionData.label && _isAllowedOption(optionData.value)) {
-      // if no label is provided, use the value as label
+  if (minDash.isObject(option)) {
+    const isValidLabel = _isValidLabel(option.label);
+
+    // (2) no label provided, but value is a simple primitive, use it as label and value
+    if (!isValidLabel && _isAllowedPrimitive(option.value)) {
       return {
-        value: optionData.value,
-        label: `${optionData.value}`
+        value: option.value,
+        label: `${option.value}`
       };
     }
-    if (_isOptionSomething(optionData.value) && _isAllowedOption(optionData.label)) {
-      // if both value and label are provided, use them as is, in this scenario, the value may also be an object
-      return optionData;
+
+    // (3) both label and value are provided, use them as is
+    if (isValidLabel && _isAllowedValue(option.value)) {
+      return option;
     }
   }
   return null;
 }
-function _isAllowedOption(option) {
-  return _isReadableType(option) && _isOptionSomething(option);
+function _isAllowedPrimitive(value) {
+  const isAllowedPrimitiveType = ['number', 'string', 'boolean'].includes(typeof value);
+  const isValid = value || value === 0 || value === false;
+  return isAllowedPrimitiveType && isValid;
 }
-function _isReadableType(option) {
-  return ['number', 'string', 'boolean'].includes(typeof option);
+function _isValidLabel(label) {
+  return label && minDash.isString(label);
 }
-function _isOptionSomething(option) {
-  return option || option === 0 || option === false;
+function _isAllowedValue(value) {
+  if (minDash.isObject(value)) {
+    return Object.keys(value).length > 0;
+  }
+  return _isAllowedPrimitive(value);
 }
 function createEmptyOptions(options = {}) {
   const defaults = {};
@@ -1230,30 +1250,6 @@ const buildLoadedState = options => ({
   loadState: LOAD_STATES.LOADED
 });
 
-function useCleanupMultiSelectValues (props) {
-  const {
-    field,
-    options,
-    loadState,
-    onChange,
-    values
-  } = props;
-
-  // Ensures that the values are always a subset of the possible options
-  hooks.useEffect(() => {
-    if (loadState !== LOAD_STATES.LOADED) {
-      return;
-    }
-    const hasValuesNotInOptions = values.some(v => !options.map(o => o.value).includes(v));
-    if (hasValuesNotInOptions) {
-      onChange({
-        field,
-        value: values.filter(v => options.map(o => o.value).includes(v))
-      });
-    }
-  }, [field, options, onChange, JSON.stringify(values), loadState]);
-}
-
 const ENTER_KEYDOWN_EVENT = new KeyboardEvent('keydown', {
   code: 'Enter',
   key: 'Enter',
@@ -1429,6 +1425,12 @@ function sanitizeDateTimePickerValue(options) {
   if (subtype === DATETIME_SUBTYPES.DATETIME && (isInvalidDateString(value) || !isDateTimeInputInformationSufficient(value))) return null;
   return value;
 }
+function hasEqualValue(value, array) {
+  if (!Array.isArray(array)) {
+    return false;
+  }
+  return array.some(element => isEqual(value, element));
+}
 function sanitizeSingleSelectValue(options) {
   const {
     formField,
@@ -1437,7 +1439,7 @@ function sanitizeSingleSelectValue(options) {
   } = options;
   try {
     const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
-    return validValues.includes(value) ? value : null;
+    return hasEqualValue(value, validValues) ? value : null;
   } catch (error) {
     // use default value in case of formatting error
     // TODO(@Skaiir): log a warning when this happens - https://github.com/bpmn-io/form-js/issues/289
@@ -1452,7 +1454,7 @@ function sanitizeMultiSelectValue(options) {
   } = options;
   try {
     const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
-    return value.filter(v => validValues.includes(v));
+    return value.filter(v => hasEqualValue(v, validValues));
   } catch (error) {
     // use default value in case of formatting error
     // TODO(@Skaiir): log a warning when this happens - https://github.com/bpmn-io/form-js/issues/289
@@ -1460,6 +1462,31 @@ function sanitizeMultiSelectValue(options) {
   }
 }
 
+function useCleanupMultiSelectValues (props) {
+  const {
+    field,
+    options,
+    loadState,
+    onChange,
+    values
+  } = props;
+
+  // Ensures that the values are always a subset of the possible options
+  hooks.useEffect(() => {
+    if (loadState !== LOAD_STATES.LOADED) {
+      return;
+    }
+    const optionValues = options.map(o => o.value);
+    const hasValuesNotInOptions = values.some(v => !hasEqualValue(v, optionValues));
+    if (hasValuesNotInOptions) {
+      onChange({
+        field,
+        value: values.filter(v => hasEqualValue(v, optionValues))
+      });
+    }
+  }, [field, options, onChange, JSON.stringify(values), loadState]);
+}
+
 const type$d = 'checklist';
 function Checklist(props) {
   const {
@@ -1482,16 +1509,11 @@ function Checklist(props) {
   const {
     required
   } = validate;
-  const toggleCheckbox = v => {
-    let newValue = [...values];
-    if (!newValue.includes(v)) {
-      newValue.push(v);
-    } else {
-      newValue = newValue.filter(x => x != v);
-    }
+  const toggleCheckbox = toggledValue => {
+    const newValues = hasEqualValue(toggledValue, values) ? values.filter(value => !isEqual(value, toggledValue)) : [...values, toggledValue];
     props.onChange({
       field,
-      value: newValue
+      value: newValues
     });
   };
   const onCheckboxBlur = e => {
@@ -1529,15 +1551,16 @@ function Checklist(props) {
       required: required
     }), loadState == LOAD_STATES.LOADED && options.map((o, index) => {
       const itemDomId = `${domId}-${index}`;
+      const isChecked = hasEqualValue(o.value, values);
       return jsxRuntime.jsx(Label, {
         id: itemDomId,
         label: o.label,
         class: classNames({
-          'fjs-checked': values.includes(o.value)
+          'fjs-checked': isChecked
         }),
         required: false,
         children: jsxRuntime.jsx("input", {
-          checked: values.includes(o.value),
+          checked: isChecked,
           class: "fjs-input",
           disabled: disabled,
           readOnly: readonly,
@@ -3055,6 +3078,40 @@ Image.config = {
   })
 };
 
+function useFlushDebounce(func, additionalDeps = []) {
+  const timeoutRef = hooks.useRef(null);
+  const lastArgsRef = hooks.useRef(null);
+  const config = useService('config', false);
+  const debounce = config && config.debounce;
+  const shouldDebounce = debounce !== false && debounce !== 0;
+  const delay = typeof debounce === 'number' ? debounce : 300;
+  const debounceFunc = hooks.useCallback((...args) => {
+    if (!shouldDebounce) {
+      func(...args);
+      return;
+    }
+    lastArgsRef.current = args;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      func(...lastArgsRef.current);
+      lastArgsRef.current = null;
+    }, delay);
+  }, [func, delay, shouldDebounce, ...additionalDeps]);
+  const flushFunc = hooks.useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      if (lastArgsRef.current !== null) {
+        func(...lastArgsRef.current);
+        lastArgsRef.current = null;
+      }
+      timeoutRef.current = null;
+    }
+  }, [func, ...additionalDeps]);
+  return [debounceFunc, flushFunc];
+}
+
 function TemplatedInputAdorner(props) {
   const {
     pre,
@@ -3145,8 +3202,7 @@ function Numberfield(props) {
     onFocus,
     field,
     value,
-    readonly,
-    onChange
+    readonly
   } = props;
   const {
     description,
@@ -3166,6 +3222,16 @@ function Numberfield(props) {
   } = validate;
   const inputRef = hooks.useRef();
   const [stringValueCache, setStringValueCache] = hooks.useState('');
+  const [onChangeDebounced, flushOnChange] = useFlushDebounce(params => {
+    props.onChange(params);
+  }, [props.onChange]);
+  const onInputBlur = () => {
+    flushOnChange && flushOnChange();
+    onBlur && onBlur();
+  };
+  const onInputFocus = () => {
+    onFocus && onFocus();
+  };
 
   // checks whether the value currently in the form data is practically different from the one in the input field cache
   // this allows us to guarantee the field always displays valid form data, but without auto-simplifying values like 1.000 to 1
@@ -3189,7 +3255,7 @@ function Numberfield(props) {
   const setValue = hooks.useCallback(stringValue => {
     if (isNullEquivalentValue(stringValue)) {
       setStringValueCache('');
-      onChange({
+      onChangeDebounced({
         field,
         value: null
       });
@@ -3204,18 +3270,18 @@ function Numberfield(props) {
     }
     if (isNaN(Number(stringValue))) {
       setStringValueCache('NaN');
-      onChange({
+      onChangeDebounced({
         field,
         value: 'NaN'
       });
       return;
     }
     setStringValueCache(stringValue);
-    onChange({
+    onChangeDebounced({
       field,
       value: serializeToString ? stringValue : Number(stringValue)
     });
-  }, [field, onChange, serializeToString]);
+  }, [field, onChangeDebounced, serializeToString]);
   const increment = () => {
     if (readonly) {
       return;
@@ -3299,8 +3365,8 @@ function Numberfield(props) {
           id: domId,
           onKeyDown: onKeyDown,
           onKeyPress: onKeyPress,
-          onBlur: () => onBlur && onBlur(),
-          onFocus: () => onFocus && onFocus()
+          onBlur: onInputBlur,
+          onFocus: onInputFocus
 
           // @ts-ignore
           ,
@@ -3377,7 +3443,8 @@ function useCleanupSingleSelectValue (props) {
     if (loadState !== LOAD_STATES.LOADED) {
       return;
     }
-    const hasValueNotInOptions = value && !options.map(o => o.value).includes(value);
+    const optionValues = options.map(o => o.value);
+    const hasValueNotInOptions = value && !hasEqualValue(value, optionValues);
     if (hasValueNotInOptions) {
       onChange({
         field,
@@ -3450,15 +3517,16 @@ function Radio(props) {
       required: required
     }), loadState == LOAD_STATES.LOADED && options.map((option, index) => {
       const itemDomId = `${domId}-${index}`;
+      const isChecked = isEqual(option.value, value);
       return jsxRuntime.jsx(Label, {
         id: itemDomId,
         label: option.label,
         class: classNames({
-          'fjs-checked': option.value === value
+          'fjs-checked': isChecked
         }),
         required: false,
         children: jsxRuntime.jsx("input", {
-          checked: option.value === value,
+          checked: isChecked,
           class: "fjs-input",
           disabled: disabled,
           readOnly: readonly,
@@ -3488,6 +3556,21 @@ Radio.config = {
   create: createEmptyOptions
 };
 
+/**
+ * This hook allows us to retrieve the label from a value in linear time by caching it in a map
+ * @param {Array} options
+ */
+function useGetLabelCorrelation(options) {
+  // This allows us to retrieve the label from a value in linear time
+  const labelMap = hooks.useMemo(() => Object.assign({}, ...options.map(o => ({
+    [_getValueHash(o.value)]: o.label
+  }))), [options]);
+  return hooks.useCallback(value => labelMap[_getValueHash(value)], [labelMap]);
+}
+const _getValueHash = value => {
+  return minDash.isObject(value) ? JSON.stringify(value) : value;
+};
+
 var _path$q;
 function _extends$r() { _extends$r = 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$r.apply(this, arguments); }
 var SvgXMark = function SvgXMark(props) {
@@ -3519,7 +3602,7 @@ function SearchableSelect(props) {
   } = props;
   const [filter, setFilter] = hooks.useState('');
   const [isDropdownExpanded, setIsDropdownExpanded] = hooks.useState(false);
-  const [shouldApplyFilter, setShouldApplyFilter] = hooks.useState(true);
+  const [isFilterActive, setIsFilterActive] = hooks.useState(true);
   const [isEscapeClosed, setIsEscapeClose] = hooks.useState(false);
   const searchbarRef = hooks.useRef();
   const eventBus = useService('eventBus');
@@ -3534,23 +3617,22 @@ function SearchableSelect(props) {
     value,
     onChange: props.onChange
   });
-
-  // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
-  const valueToOptionMap = hooks.useMemo(() => Object.assign({}, ...options.map((o, x) => ({
-    [o.value]: options[x]
-  }))), [options]);
-  const valueLabel = hooks.useMemo(() => value && valueToOptionMap[value] && valueToOptionMap[value].label || '', [value, valueToOptionMap]);
+  const getLabelCorrelation = useGetLabelCorrelation(options);
+  const label = hooks.useMemo(() => value && getLabelCorrelation(value), [value, getLabelCorrelation]);
 
   // whenever we change the underlying value, set the label to it
   hooks.useEffect(() => {
-    setFilter(valueLabel);
-  }, [valueLabel]);
+    setFilter(label);
+  }, [label]);
   const filteredOptions = hooks.useMemo(() => {
-    if (loadState === LOAD_STATES.LOADED) {
-      return shouldApplyFilter ? options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase())) : options;
+    if (loadState !== LOAD_STATES.LOADED) {
+      return [];
     }
-    return [];
-  }, [filter, loadState, options, shouldApplyFilter]);
+    if (!filter || !isFilterActive) {
+      return options;
+    }
+    return options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()));
+  }, [filter, loadState, options, isFilterActive]);
   const setValue = hooks.useCallback(option => {
     setFilter(option && option.label || '');
     props.onChange({
@@ -3577,7 +3659,7 @@ function SearchableSelect(props) {
   }) => {
     setIsEscapeClose(false);
     setIsDropdownExpanded(true);
-    setShouldApplyFilter(true);
+    setIsFilterActive(true);
     setFilter(target.value || '');
     eventBus.fire('formField.search', {
       formField: field,
@@ -3593,7 +3675,7 @@ function SearchableSelect(props) {
         {
           if (!isDropdownExpanded) {
             setIsDropdownExpanded(true);
-            setShouldApplyFilter(false);
+            setIsFilterActive(false);
           }
           keyDownEvent.preventDefault();
           break;
@@ -3611,7 +3693,7 @@ function SearchableSelect(props) {
   const onInputMouseDown = hooks.useCallback(() => {
     setIsEscapeClose(false);
     setIsDropdownExpanded(true);
-    setShouldApplyFilter(false);
+    setIsFilterActive(false);
   }, []);
   const onInputFocus = hooks.useCallback(() => {
     setIsEscapeClose(false);
@@ -3620,9 +3702,9 @@ function SearchableSelect(props) {
   }, [onFocus]);
   const onInputBlur = hooks.useCallback(() => {
     setIsDropdownExpanded(false);
-    setFilter(valueLabel);
+    setFilter(label);
     onBlur && onBlur();
-  }, [onBlur, valueLabel]);
+  }, [onBlur, label]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs("div", {
       class: classNames('fjs-input-group', {
@@ -3699,12 +3781,8 @@ function SimpleSelect(props) {
     value,
     onChange: props.onChange
   });
-
-  // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
-  const valueToOptionMap = hooks.useMemo(() => Object.assign({}, ...options.map((o, x) => ({
-    [o.value]: options[x]
-  }))), [options]);
-  const valueLabel = hooks.useMemo(() => value && valueToOptionMap[value] && valueToOptionMap[value].label || '', [value, valueToOptionMap]);
+  const getLabelCorrelation = useGetLabelCorrelation(options);
+  const valueLabel = hooks.useMemo(() => value && getLabelCorrelation(value), [value, getLabelCorrelation]);
   const setValue = hooks.useCallback(option => {
     props.onChange({
       value: option && option.value || null,
@@ -4019,11 +4097,7 @@ function Taglist(props) {
     values,
     onChange: props.onChange
   });
-
-  // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
-  const valueToOptionMap = hooks.useMemo(() => Object.assign({}, ...options.map((o, x) => ({
-    [o.value]: options[x]
-  }))), [options]);
+  const getLabelCorrelation = useGetLabelCorrelation(options);
   const hasOptionsLeft = hooks.useMemo(() => options.length > values.length, [options.length, values.length]);
 
   // Usage of stringify is necessary here because we want this effect to only trigger when there is a value change to the array
@@ -4031,12 +4105,14 @@ function Taglist(props) {
     if (loadState !== LOAD_STATES.LOADED) {
       return [];
     }
-    return options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()) && !values.includes(o.value));
+    const isValidFilteredOption = option => {
+      const filterMatches = option.label.toLowerCase().includes(filter.toLowerCase());
+      return filterMatches && !hasEqualValue(option.value, values);
+    };
+    return options.filter(isValidFilteredOption);
   }, [filter, options, JSON.stringify(values), loadState]);
   const selectValue = value => {
-    if (filter) {
-      setFilter('');
-    }
+    setFilter('');
 
     // Ensure values cannot be double selected due to latency
     if (values.at(-1) === value) {
@@ -4048,8 +4124,9 @@ function Taglist(props) {
     });
   };
   const deselectValue = value => {
+    const newValues = values.filter(v => !isEqual(v, value));
     props.onChange({
-      value: values.filter(v => v != value),
+      value: newValues,
       field
     });
   };
@@ -4159,7 +4236,7 @@ function Taglist(props) {
             onMouseDown: e => e.preventDefault(),
             children: [jsxRuntime.jsx("span", {
               class: "fjs-taglist-tag-label",
-              children: valueToOptionMap[v] ? valueToOptionMap[v].label : undefined
+              children: getLabelCorrelation(v)
             }), !disabled && !readonly && jsxRuntime.jsx("button", {
               type: "button",
               title: "Remove tag",
@@ -4325,13 +4402,20 @@ function Textfield(props) {
   const {
     required
   } = validate;
-  const onChange = ({
+  const [onInputChange, flushOnChange] = useFlushDebounce(({
     target
   }) => {
     props.onChange({
       field,
       value: target.value
     });
+  }, [props.onChange]);
+  const onInputBlur = () => {
+    flushOnChange && flushOnChange();
+    onBlur && onBlur();
+  };
+  const onInputFocus = () => {
+    onFocus && onFocus();
   };
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$2, {
@@ -4353,9 +4437,9 @@ function Textfield(props) {
         disabled: disabled,
         readOnly: readonly,
         id: domId,
-        onInput: onChange,
-        onBlur: () => onBlur && onBlur(),
-        onFocus: () => onFocus && onFocus(),
+        onInput: onInputChange,
+        onBlur: onInputBlur,
+        onFocus: onInputFocus,
         type: "text",
         value: value,
         "aria-describedby": errorMessageId
@@ -4414,13 +4498,20 @@ function Textarea(props) {
     required
   } = validate;
   const textareaRef = hooks.useRef();
-  const onInput = ({
+  const [onInputChange, flushOnChange] = useFlushDebounce(({
     target
   }) => {
     props.onChange({
       field,
       value: target.value
     });
+  }, [props.onChange]);
+  const onInputBlur = () => {
+    flushOnChange && flushOnChange();
+    onBlur && onBlur();
+  };
+  const onInputFocus = () => {
+    onFocus && onFocus();
   };
   hooks.useLayoutEffect(() => {
     autoSizeTextarea(textareaRef.current);
@@ -4443,9 +4534,9 @@ function Textarea(props) {
       disabled: disabled,
       readonly: readonly,
       id: domId,
-      onInput: onInput,
-      onBlur: () => onBlur && onBlur(),
-      onFocus: () => onFocus && onFocus(),
+      onInput: onInputChange,
+      onBlur: onInputBlur,
+      onFocus: onInputFocus,
       value: value,
       ref: textareaRef,
       "aria-describedby": errorMessageId
@@ -7986,16 +8077,18 @@ class Form {
    */
   _createInjector(options, container) {
     const {
+      modules = this._getModules(),
       additionalModules = [],
-      modules = this._getModules()
+      ...config
     } = options;
-    const config = {
+    const enrichedConfig = {
+      ...config,
       renderer: {
         container
       }
     };
     return createInjector([{
-      config: ['value', config]
+      config: ['value', enrichedConfig]
     }, {
       form: ['value', this]
     }, core, ...modules, ...additionalModules]);
@@ -8242,9 +8335,9 @@ function createForm(options) {
   const {
     data,
     schema,
-    ...rest
+    ...formOptions
   } = options;
-  const form = new Form(rest);
+  const form = new Form(formOptions);
   return form.importSchema(schema, data).then(function () {
     return form;
   });