@mtes-mct/monitor-ui 4.0.2 → 4.0.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [4.0.2](https://github.com/MTES-MCT/monitor-ui/compare/v4.0.1...v4.0.2) (2023-03-29)
+
+
+### Bug Fixes
+
+* **fields:** handle value prop change in Select & MultiSelect ([db2f931](https://github.com/MTES-MCT/monitor-ui/commit/db2f931256b82dd8c1c0c7ddf1b2884154142260))
+
 ## [4.0.1](https://github.com/MTES-MCT/monitor-ui/compare/v4.0.0...v4.0.1) (2023-03-29)
 
 

package/index.js

@@ -22295,25 +22295,15 @@ function getRsuiteDataFromOptions(options, optionValueKey) {
     }));
 }
 
-/**
- * Add the provided `item` in a collection if this collection doesn't include it or remove it if this collection does.
- *
- * This is useful with object collections and polymorphic types.
- */
-function toggleInCollection(item, collection) {
-    const isInCollection = includes(item, collection);
-    return isInCollection ? reject(equals(item), collection) : [...collection, item];
-}
-
 function MultiSelect({ baseContainer, disabled = false, error, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, searchable = false, value, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
-    const selectedOptionValuesRef = useRef(value || []);
     const [isOpen, setIsOpen] = useState(false);
     const { controlledOnChange, controlledValue } = useFieldControl(value, onChange, {
         disabled,
         isUndefinedWhenDisabled
     });
+    const controlledRsuiteValue = useMemo(() => (controlledValue || []).map(controlledValueItem => getRsuiteValueFromOptionValue(controlledValueItem, optionValueKey)), [controlledValue, optionValueKey]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const data = useMemo(() => getRsuiteDataFromOptions(options, optionValueKey), [options, optionValueKey]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
@@ -22322,16 +22312,15 @@ function MultiSelect({ baseContainer, disabled = false, error, isLabelHidden = f
     const close = useCallback(() => {
         setIsOpen(false);
     }, []);
-    const handleClean = useCallback(() => {
-        selectedOptionValuesRef.current = [];
-        controlledOnChange(undefined);
-    }, [controlledOnChange]);
-    const handleSelect = useCallback((_, selectedItem) => {
-        const nextValues = toggleInCollection(selectedItem.optionValue, selectedOptionValuesRef.current);
-        selectedOptionValuesRef.current = nextValues;
-        const normalizedNextValue = !nextValues.length ? undefined : nextValues;
+    const handleChange = useCallback((nextOptionRsuiteValues) => {
+        const nextValue = nextOptionRsuiteValues
+            ? options
+                .filter(option => nextOptionRsuiteValues.includes(optionValueKey ? option.value[optionValueKey] : String(option.value)))
+                .map(option => option.value)
+            : [];
+        const normalizedNextValue = !nextValue.length ? undefined : nextValue;
         controlledOnChange(normalizedNextValue);
-    }, [controlledOnChange]);
+    }, [controlledOnChange, options, optionValueKey]);
     const renderMenuItem = useCallback((node) => jsx("span", { title: String(node), children: String(node) }), []);
     const toggle = useCallback((event) => {
         let targetElement = event.target;
@@ -22351,9 +22340,9 @@ function MultiSelect({ baseContainer, disabled = false, error, isLabelHidden = f
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$4, { ref: boxRef, "$hasError": hasError, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current, data: data, disabled: disabled, id: originalProps.name, onClean: handleClean, onClick: toggle, 
+    return (jsxs(Field$2, { children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$4, { ref: boxRef, "$hasError": hasError, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current, data: data, disabled: disabled, id: originalProps.name, 
                     // Since we customized `ItemDataType` type by adding `optionValue`, we have an optional vs required conflict
-                    onSelect: handleSelect, open: isOpen, renderMenuItem: renderMenuItem, searchable: searchable, value: controlledValue, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
+                    onChange: handleChange, onClick: toggle, open: isOpen, renderMenuItem: renderMenuItem, searchable: searchable, value: controlledRsuiteValue, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const Box$4 = styled.div `
   position: relative;