@bpmn-io/form-js-viewer 0.8.0-alpha.1 → 0.8.0

package/dist/index.es.js

@@ -594,10 +594,10 @@ function createInjector(bootstrapModules) {
   return injector;
 }
 
-/**
- * @param {string?} prefix
- *
- * @returns Element
+/**
+ * @param {string?} prefix
+ *
+ * @returns Element
  */
 function createFormContainer(prefix = 'fjs') {
   const container = document.createElement('div');
@@ -643,22 +643,22 @@ function generateIndexForType(type) {
 function generateIdForType(type) {
   return `${type}${generateIndexForType(type)}`;
 }
-/**
- * @template T
- * @param {T} data
- * @param {(this: any, key: string, value: any) => any} [replacer]
- * @return {T}
+/**
+ * @template T
+ * @param {T} data
+ * @param {(this: any, key: string, value: any) => any} [replacer]
+ * @return {T}
  */
 
 function clone(data, replacer) {
   return JSON.parse(JSON.stringify(data, replacer));
 }
-/**
- * Parse the schema for input variables a form might make use of
- *
- * @param {any} schema
- *
- * @return {string[]}
+/**
+ * Parse the schema for input variables a form might make use of
+ *
+ * @param {any} schema
+ *
+ * @return {string[]}
  */
 
 function getSchemaVariables(schema) {
@@ -690,24 +690,24 @@ function getSchemaVariables(schema) {
 }
 
 class Importer {
-  /**
-   * @constructor
-   * @param { import('../core').FormFieldRegistry } formFieldRegistry
-   * @param { import('../render/FormFields').default } formFields
+  /**
+   * @constructor
+   * @param { import('../core').FormFieldRegistry } formFieldRegistry
+   * @param { import('../render/FormFields').default } formFields
    */
   constructor(formFieldRegistry, formFields) {
     this._formFieldRegistry = formFieldRegistry;
     this._formFields = formFields;
   }
-  /**
-   * Import schema adding `id`, `_parent` and `_path`
-   * information to each field and adding it to the
-   * form field registry.
-   *
-   * @param {any} schema
-   * @param {any} [data]
-   *
-   * @return { { warnings: Array<any>, schema: any, data: any } }
+  /**
+   * Import schema adding `id`, `_parent` and `_path`
+   * information to each field and adding it to the
+   * form field registry.
+   *
+   * @param {any} schema
+   * @param {any} [data]
+   *
+   * @return { { warnings: Array<any>, schema: any, data: any } }
    */
 
 
@@ -728,11 +728,11 @@ class Importer {
       throw err;
     }
   }
-  /**
-   * @param {any} formField
-   * @param {string} [parentId]
-   *
-   * @return {any} importedField
+  /**
+   * @param {any} formField
+   * @param {string} [parentId]
+   *
+   * @return {any} importedField
    */
 
 
@@ -794,10 +794,10 @@ class Importer {
       this.importFormField(component, parentId);
     });
   }
-  /**
-   * @param {Object} data
-   *
-   * @return {Object} importedData
+  /**
+   * @param {Object} data
+   *
+   * @return {Object} importedData
    */
 
 
@@ -858,11 +858,11 @@ const ALLOWED_URI_PATTERN = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^
 const ATTR_WHITESPACE_PATTERN = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g; // eslint-disable-line no-control-regex
 
 const FORM_ELEMENT = document.createElement('form');
-/**
- * Sanitize a HTML string and return the cleaned, safe version.
- *
- * @param {string} html
- * @return {string}
+/**
+ * Sanitize a HTML string and return the cleaned, safe version.
+ *
+ * @param {string} html
+ * @return {string}
  */
 
 function sanitizeHTML(html) {
@@ -881,15 +881,15 @@ function sanitizeHTML(html) {
     return '';
   }
 }
-/**
- * Recursively sanitize a HTML node, potentially
- * removing it, its children or attributes.
- *
- * Inspired by https://github.com/developit/snarkdown/issues/70
- * and https://github.com/cure53/DOMPurify. Simplified
- * for our use-case.
- *
- * @param {Element} node
+/**
+ * Recursively sanitize a HTML node, potentially
+ * removing it, its children or attributes.
+ *
+ * Inspired by https://github.com/developit/snarkdown/issues/70
+ * and https://github.com/cure53/DOMPurify. Simplified
+ * for our use-case.
+ *
+ * @param {Element} node
  */
 
 function sanitizeNode(node) {
@@ -936,13 +936,13 @@ function sanitizeNode(node) {
     node.childNodes[i]);
   }
 }
-/**
- * Validates attributes for validity.
- *
- * @param {string} lcTag
- * @param {string} lcName
- * @param {string} value
- * @return {boolean}
+/**
+ * Validates attributes for validity.
+ *
+ * @param {string} lcTag
+ * @param {string} lcName
+ * @param {string} value
+ * @return {boolean}
  */
 
 
@@ -1082,11 +1082,11 @@ const FormRenderContext = createContext({
   }
 });
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 
 function getService(type, strict) {}
@@ -1217,8 +1217,8 @@ function useService (type, strict) {
   return getService(type, strict);
 }
 
-/**
- * @enum { String }
+/**
+ * @enum { String }
  */
 
 const LOAD_STATES = {
@@ -1226,17 +1226,17 @@ const LOAD_STATES = {
   LOADED: 'loaded',
   ERROR: 'error'
 };
-/**
- * @typedef {Object} ValuesGetter
- * @property {Object[]} values - The values data
- * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
+/**
+ * @typedef {Object} ValuesGetter
+ * @property {Object[]} values - The values data
+ * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
  */
 
-/**
- * A hook to load values for single and multiselect components.
- *
- * @param {Object} field - The form field to handle values for
- * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
+/**
+ * A hook to load values for single and multiselect components.
+ *
+ * @param {Object} field - The form field to handle values for
+ * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
  */
 
 function useValuesAsync (field) {
@@ -1439,10 +1439,10 @@ Default.create = function (options = {}) {
 Default.type = 'default';
 Default.keyed = false;
 
-/**
- * This file must not be changed or exchanged.
- *
- * @see http://bpmn.io/license for more information.
+/**
+ * This file must not be changed or exchanged.
+ *
+ * @see http://bpmn.io/license for more information.
  */
 
 function Logo() {
@@ -1797,7 +1797,7 @@ Select.keyed = true;
 Select.emptyValue = null;
 Select.sanitizeValue = sanitizeSingleSelectValue;
 
-function _extends() { _extends = Object.assign || 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); }
+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 CloseIcon = (({
   styles = {},
   ...props
@@ -1946,35 +1946,30 @@ function Taglist(props) {
     formId
   } = useContext(FormContext);
   const [filter, setFilter] = useState('');
-  const [selectedValues, setSelectedValues] = useState([]);
-  const [filteredValues, setFilteredValues] = useState([]);
+  const [filteredOptions, setFilteredOptions] = useState([]);
   const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
-  const [hasValuesLeft, setHasValuesLeft] = useState(true);
+  const [hasOptionsLeft, setHasOptionsLeft] = useState(true);
   const [isEscapeClosed, setIsEscapeClose] = useState(false);
   const searchbarRef = useRef();
   const {
     state: loadState,
     values: options
-  } = useValuesAsync(field); // Usage of stringify is necessary here because we want this effect to only trigger when there is a value change to the array
+  } = useValuesAsync(field); // 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 = useMemo(() => Object.assign({}, ...options.map((o, x) => ({
+    [o.value]: options[x]
+  }))), [options]); // Usage of stringify is necessary here because we want this effect to only trigger when there is a value change to the array
 
   useEffect(() => {
     if (loadState === LOAD_STATES.LOADED) {
-      const selectedValues = values.map(v => options.find(o => o.value === v)).filter(v => v !== undefined);
-      setSelectedValues(selectedValues);
-    } else {
-      setSelectedValues([]);
-    }
-  }, [JSON.stringify(values), options, loadState]);
-  useEffect(() => {
-    if (loadState === LOAD_STATES.LOADED) {
-      setFilteredValues(options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()) && !values.includes(o.value)));
+      setFilteredOptions(options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()) && !values.includes(o.value)));
     } else {
-      setFilteredValues([]);
+      setFilteredOptions([]);
     }
-  }, [filter, JSON.stringify(values), options]);
+  }, [filter, JSON.stringify(values), options, loadState]);
   useEffect(() => {
-    setHasValuesLeft(selectedValues.length < options.length);
-  }, [selectedValues.length, options.length]);
+    setHasOptionsLeft(options.length > values.length);
+  }, [options.length, values.length]);
 
   const onFilterChange = ({
     target
@@ -1983,17 +1978,25 @@ function Taglist(props) {
     setFilter(target.value);
   };
 
-  const selectValue = option => {
-    setFilter('');
+  const selectValue = value => {
+    if (filter) {
+      setFilter('');
+    } // Ensure values cannot be double selected due to latency
+
+
+    if (values.at(-1) === value) {
+      return;
+    }
+
     props.onChange({
-      value: [...values, option.value],
+      value: [...values, value],
       field
     });
   };
 
-  const deselectValue = option => {
+  const deselectValue = value => {
     props.onChange({
-      value: values.filter(v => v != option.value),
+      value: values.filter(v => v != value),
       field
     });
   };
@@ -2007,8 +2010,8 @@ function Taglist(props) {
         break;
 
       case 'Backspace':
-        if (!filter && selectedValues.length) {
-          deselectValue(selectedValues[selectedValues.length - 1]);
+        if (!filter && values.length) {
+          deselectValue(values[values.length - 1]);
         }
 
         break;
@@ -2035,16 +2038,16 @@ function Taglist(props) {
       class: classNames('fjs-taglist', {
         'disabled': disabled
       }),
-      children: [!disabled && loadState === LOAD_STATES.LOADED && selectedValues.map(sv => {
+      children: [!disabled && loadState === LOAD_STATES.LOADED && values.map(v => {
         return jsxs("div", {
           class: "fjs-taglist-tag",
           onMouseDown: e => e.preventDefault(),
           children: [jsx("span", {
             class: "fjs-taglist-tag-label",
-            children: sv.label
+            children: valueToOptionMap[v] ? valueToOptionMap[v].label : `unexpected value{${v}}`
           }), jsx("span", {
             class: "fjs-taglist-tag-remove",
-            onMouseDown: () => deselectValue(sv),
+            onMouseDown: () => deselectValue(v),
             children: jsx(CloseIcon, {})
           })]
         });
@@ -2069,10 +2072,10 @@ function Taglist(props) {
     }), jsx("div", {
       class: "fjs-taglist-anchor",
       children: !disabled && loadState === LOAD_STATES.LOADED && isDropdownExpanded && !isEscapeClosed && jsx(DropdownList, {
-        values: filteredValues,
-        getLabel: v => v.label,
-        onValueSelected: v => selectValue(v),
-        emptyListMessage: hasValuesLeft ? 'No results' : 'All values selected',
+        values: filteredOptions,
+        getLabel: o => o.label,
+        onValueSelected: o => selectValue(o.value),
+        emptyListMessage: hasOptionsLeft ? 'No results' : 'All values selected',
         listenerElement: searchbarRef.current
       })
     }), jsx(Description, {