@bpmn-io/form-js-viewer - npm Package Compare versions

Comparing version 0.8.0-alpha.1 to 0.8.0

dist/index.es.js

@@ -1800,3 +1800,3 @@ import Ids from 'ids';
 
-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 = (({
@@ -1950,6 +1950,5 @@ styles = {},
   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);
@@ -1960,22 +1959,18 @@ const searchbarRef = useRef();
     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);
+      setFilteredOptions(options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()) && !values.includes(o.value)));
     } else {
-      setSelectedValues([]);
+      setFilteredOptions([]);
     }
-  }, [JSON.stringify(values), options, loadState]);
+  }, [filter, 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)));
-    } else {
-      setFilteredValues([]);
-    }
-  }, [filter, JSON.stringify(values), options]);
-  useEffect(() => {
-    setHasValuesLeft(selectedValues.length < options.length);
-  }, [selectedValues.length, options.length]);
+    setHasOptionsLeft(options.length > values.length);
+  }, [options.length, values.length]);
 
@@ -1989,6 +1984,14 @@ const onFilterChange = ({
 
-  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
@@ -1998,5 +2001,5 @@ });
 
-  const deselectValue = option => {
+  const deselectValue = value => {
     props.onChange({
-      value: values.filter(v => v != option.value),
+      value: values.filter(v => v != value),
       field
@@ -2015,4 +2018,4 @@ });
       case 'Backspace':
-        if (!filter && selectedValues.length) {
-          deselectValue(selectedValues[selectedValues.length - 1]);
+        if (!filter && values.length) {
+          deselectValue(values[values.length - 1]);
         }
@@ -2044,3 +2047,3 @@
       }),
-      children: [!disabled && loadState === LOAD_STATES.LOADED && selectedValues.map(sv => {
+      children: [!disabled && loadState === LOAD_STATES.LOADED && values.map(v => {
         return jsxs("div", {
@@ -2051,6 +2054,6 @@ class: "fjs-taglist-tag",
             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, {})
@@ -2080,6 +2083,6 @@ })]
       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
@@ -2086,0 +2089,0 @@ })

dist/types/core/EventBus.d.ts

 export {};

dist/types/core/FormFieldRegistry.d.ts

@@ -0,0 +0,0 @@ declare class FormFieldRegistry {

dist/types/core/index.d.ts

@@ -0,0 +0,0 @@ export { FormFieldRegistry };

dist/types/core/Validator.d.ts

@@ -0,0 +0,0 @@ declare class Validator {

dist/types/Form.d.ts

@@ -0,0 +0,0 @@ /**

dist/types/import/Importer.d.ts

@@ -0,0 +0,0 @@ declare class Importer {

dist/types/import/index.d.ts

@@ -0,0 +0,0 @@ declare namespace _default {

dist/types/index.d.ts

@@ -0,0 +0,0 @@ /**

dist/types/render/components/Description.d.ts

 export default function Description(props: any): import("preact").JSX.Element;

dist/types/render/components/Errors.d.ts

 export default function Errors(props: any): import("preact").JSX.Element;

dist/types/render/components/form-fields/Button.d.ts

@@ -0,0 +0,0 @@ declare function Button(props: any): import("preact").JSX.Element;

dist/types/render/components/form-fields/Checkbox.d.ts

@@ -0,0 +0,0 @@ declare function Checkbox(props: any): import("preact").JSX.Element;

dist/types/render/components/form-fields/Checklist.d.ts

@@ -0,0 +0,0 @@ declare function Checklist(props: any): import("preact").JSX.Element;

dist/types/render/components/form-fields/Default.d.ts

@@ -0,0 +0,0 @@ declare function Default(props: any): import("preact").JSX.Element;

dist/types/render/components/form-fields/Number.d.ts

@@ -0,0 +0,0 @@ declare function Number(props: any): import("preact").JSX.Element;

dist/types/render/components/form-fields/parts/DropdownList.d.ts

 export default function DropdownList(props: any): import("preact").JSX.Element;

dist/types/render/components/form-fields/Radio.d.ts

@@ -0,0 +0,0 @@ declare function Radio(props: any): import("preact").JSX.Element;

dist/types/render/components/form-fields/Select.d.ts

@@ -0,0 +0,0 @@ declare function Select(props: any): import("preact").JSX.Element;

dist/types/render/components/form-fields/Taglist.d.ts

@@ -0,0 +0,0 @@ declare function Taglist(props: any): import("preact").JSX.Element;

dist/types/render/components/form-fields/Text.d.ts

@@ -0,0 +0,0 @@ declare function Text(props: any): import("preact").JSX.Element;

dist/types/render/components/form-fields/Textfield.d.ts

@@ -0,0 +0,0 @@ declare function Textfield(props: any): import("preact").JSX.Element;

dist/types/render/components/FormComponent.d.ts

 export default function FormComponent(props: any): import("preact").JSX.Element;

dist/types/render/components/FormField.d.ts

 export default function FormField(props: any): import("preact").JSX.Element;

dist/types/render/components/index.d.ts

@@ -0,0 +0,0 @@ export const formFields: (typeof Button | typeof Default | typeof Radio | typeof Text)[];

dist/types/render/components/Label.d.ts

 export default function Label(props: any): import("preact").JSX.Element;

dist/types/render/components/PoweredBy.d.ts

 export default function PoweredBy(props: any): import("preact").JSX.Element;

dist/types/render/components/Sanitizer.d.ts

@@ -0,0 +0,0 @@ /**

dist/types/render/components/Util.d.ts

@@ -0,0 +0,0 @@ export function formFieldClasses(type: any, errors?: any[]): string;

dist/types/render/context/FormContext.d.ts

@@ -0,0 +0,0 @@ export default FormContext;

dist/types/render/context/FormRenderContext.d.ts

@@ -0,0 +0,0 @@ export default FormRenderContext;

dist/types/render/context/index.d.ts

 export { default as FormRenderContext } from "./FormRenderContext";
 export { default as FormContext } from "./FormContext";

dist/types/render/FormFields.d.ts

@@ -0,0 +0,0 @@ export default class FormFields {

dist/types/render/hooks/useKeyDownAction.d.ts

 export default function useKeyDownAction(targetKey: any, action: any, listenerElement?: Window & typeof globalThis): void;

dist/types/render/hooks/useService.d.ts

 export default function _default(type: any, strict: any): any;

dist/types/render/hooks/useValuesAsync.d.ts

@@ -0,0 +0,0 @@ /**

dist/types/render/index.d.ts

@@ -0,0 +0,0 @@ export { FormFields };

dist/types/render/Renderer.d.ts

@@ -0,0 +0,0 @@ /**

dist/types/types.d.ts

@@ -0,0 +0,0 @@ import { Injector } from 'didi';

dist/types/util/form.d.ts

@@ -0,0 +0,0 @@ /**

dist/types/util/index.d.ts

@@ -0,0 +0,0 @@ export function findErrors(errors: any, path: any): any;

dist/types/util/injector.d.ts

 export function createInjector(bootstrapModules: any): Injector;
 import { Injector } from "didi";

package.json

 {
   "name": "@bpmn-io/form-js-viewer",
-  "version": "0.8.0-alpha.1",
+  "version": "0.8.0",
   "description": "View forms - powered by bpmn.io",
@@ -45,3 +45,3 @@ "exports": {
     "ids": "^1.0.0",
-    "min-dash": "^3.7.0",
+    "min-dash": "^3.8.1",
     "preact": "^10.5.14",
@@ -56,3 +56,3 @@ "preact-markup": "^2.1.1"
   ],
-  "gitHead": "2be914efeefa050fb4692ac1a644557fc424917f"
+  "gitHead": "0d9bff2b98491fb96944135e78106cbf807c580a"
 }

README.md

@@ -0,0 +0,0 @@ # @bpmn-io/form-js-viewer

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

426688

decreased by-0.51%

Lines of code

5514

decreased by-0.04%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedmin-dash@^3.8.1