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

package/dist/index.cjs

@@ -1809,7 +1809,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
@@ -1958,35 +1958,30 @@ function Taglist(props) {
     formId
   } = hooks.useContext(FormContext);
   const [filter, setFilter] = hooks.useState('');
-  const [selectedValues, setSelectedValues] = hooks.useState([]);
-  const [filteredValues, setFilteredValues] = hooks.useState([]);
+  const [filteredOptions, setFilteredOptions] = hooks.useState([]);
   const [isDropdownExpanded, setIsDropdownExpanded] = hooks.useState(false);
-  const [hasValuesLeft, setHasValuesLeft] = hooks.useState(true);
+  const [hasOptionsLeft, setHasOptionsLeft] = hooks.useState(true);
   const [isEscapeClosed, setIsEscapeClose] = hooks.useState(false);
   const searchbarRef = hooks.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 = hooks.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
 
   hooks.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]);
-  hooks.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]);
   hooks.useEffect(() => {
-    setHasValuesLeft(selectedValues.length < options.length);
-  }, [selectedValues.length, options.length]);
+    setHasOptionsLeft(options.length > values.length);
+  }, [options.length, values.length]);
 
   const onFilterChange = ({
     target
@@ -1995,17 +1990,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
     });
   };
@@ -2019,8 +2022,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;
@@ -2047,16 +2050,16 @@ function Taglist(props) {
       class: classNames__default['default']('fjs-taglist', {
         'disabled': disabled
       }),
-      children: [!disabled && loadState === LOAD_STATES.LOADED && selectedValues.map(sv => {
+      children: [!disabled && loadState === LOAD_STATES.LOADED && values.map(v => {
         return jsxRuntime.jsxs("div", {
           class: "fjs-taglist-tag",
           onMouseDown: e => e.preventDefault(),
           children: [jsxRuntime.jsx("span", {
             class: "fjs-taglist-tag-label",
-            children: sv.label
+            children: valueToOptionMap[v] ? valueToOptionMap[v].label : `unexpected value{${v}}`
           }), jsxRuntime.jsx("span", {
             class: "fjs-taglist-tag-remove",
-            onMouseDown: () => deselectValue(sv),
+            onMouseDown: () => deselectValue(v),
             children: jsxRuntime.jsx(CloseIcon, {})
           })]
         });
@@ -2081,10 +2084,10 @@ function Taglist(props) {
     }), jsxRuntime.jsx("div", {
       class: "fjs-taglist-anchor",
       children: !disabled && loadState === LOAD_STATES.LOADED && isDropdownExpanded && !isEscapeClosed && jsxRuntime.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
       })
     }), jsxRuntime.jsx(Description, {