@mtes-mct/monitor-ui 4.0.1 → 4.0.3

package/index.js

@@ -2841,7 +2841,6 @@ p.disabled ? p.theme.color.lightGray : p.hasError ? p.theme.color.maximumRed : p
   margin-bottom: 4px;
 `;
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
 function Legend({ disabled = false, hasError = false, isHidden = false, ...nativeProps }) {
     return jsx(StyledLabel, { as: "legend", disabled: disabled, hasError: hasError, isHidden: isHidden, ...nativeProps });
 }
@@ -3491,9 +3490,7 @@ const useClickOutsideEffect = (zoneRefOrzoneRefs, action, baseContainer) => {
     }, [baseContainer, handleClickOutside]);
 };
 
-function useFieldUndefineEffect(
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled, onChange, onDisable) {
+function useFieldUndefineEffect(disabled, onChange, onDisable) {
     useEffect(() => {
         if (!disabled) {
             return;
@@ -20718,8 +20715,7 @@ var lodash = {
  * @see https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
  */
 function useForceUpdate() {
-    // eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars
-    const [_, forceUpdate] = useReducer(x => x + 1, 0);
+    const [, forceUpdate] = useReducer(x => x + 1, 0);
     const forceDebouncedUpdate = useMemo(() => lodashExports.throttle(forceUpdate, 500), [forceUpdate]);
     return { forceDebouncedUpdate, forceUpdate };
 }
@@ -20737,7 +20733,7 @@ const getPseudoRandomString = () => Math.random().toString(36).slice(2);
 function useKey(deps) {
     const keyRef = useRef(getPseudoRandomString());
     const prevDeps = usePrevious(deps);
-    if (!prevDeps || equals(deps, prevDeps)) {
+    if (lodashExports.isEqual(deps, prevDeps)) {
         return keyRef.current;
     }
     keyRef.current = getPseudoRandomString();
@@ -21393,9 +21389,7 @@ const StyledNumberInput = styled.input `
   }
 `;
 
-function DateInputWithRef({ baseContainer, defaultValue, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, isCompact, isEndDate = false, isForcedFocused, isLight, isStartDate = false, onBack, onChange, onClick, onNext, onPrevious }, ref) {
+function DateInputWithRef({ baseContainer, defaultValue, disabled = false, isCompact, isEndDate = false, isForcedFocused, isLight, isStartDate = false, onBack, onChange, onClick, onNext, onPrevious }, ref) {
     const boxRef = useRef();
     const dayInputRef = useRef();
     const monthInputRef = useRef();
@@ -21579,9 +21573,7 @@ const Option = styled.div `
   }
 `;
 
-function TimeInputWithRef({ baseContainer, defaultValue, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, isCompact, isEndDate = false, isLight, isStartDate = false, minutesRange = 15, onBack, onChange, onFocus, onNext, onPrevious }, ref) {
+function TimeInputWithRef({ baseContainer, defaultValue, disabled = false, isCompact, isEndDate = false, isLight, isStartDate = false, minutesRange = 15, onBack, onChange, onFocus, onNext, onPrevious }, ref) {
     const boxRef = useRef();
     const hourInputRef = useRef();
     const minuteInputRef = useRef();
@@ -21693,9 +21685,7 @@ const InputGroup = styled.div `
   }
 `;
 
-function DatePicker({ baseContainer, defaultValue, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, error, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
+function DatePicker({ baseContainer, defaultValue, disabled = false, error, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
     const boxRef = useRef();
     const dateInputRef = useRef();
     const timeInputRef = useRef();
@@ -22016,9 +22006,7 @@ var DateRangePosition;
     DateRangePosition["START"] = "START";
 })(DateRangePosition || (DateRangePosition = {}));
 
-function DateRangePicker({ baseContainer, defaultValue, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, error, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
+function DateRangePicker({ baseContainer, defaultValue, disabled = false, error, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
     const startDateInputRef = useRef();
     const startTimeInputRef = useRef();
     const endDateInputRef = useRef();
@@ -22207,9 +22195,7 @@ const Field = styled.span `
 }};
 `;
 
-function MultiCheckbox({ value = [], 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, error, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options }) {
+function MultiCheckbox({ value = [], disabled = false, error, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options }) {
     // This tracks the component internal value which allows us to react to value changes after each checkbox toggling
     const [internalValue, setInternalValue] = useState(value);
     // and compare it with an eventual external value change (via the `value` prop)
@@ -22272,55 +22258,69 @@ const ChecboxesBox = styled.div `
     `}
 `;
 
+function useFieldControl(value, onChange, props) {
+    const { disabled, isUndefinedWhenDisabled } = props;
+    // This tracks the component internal value which allows us to react to value changes after the checkbox toggling
+    const internalValueRef = useRef(value);
+    // and compare it with an eventual external value change (via the `value` prop)
+    const previousValue = usePrevious(value);
+    const { forceUpdate } = useForceUpdate();
+    const controlledValue = isUndefinedWhenDisabled && disabled ? undefined : internalValueRef.current;
+    const controlledOnChange = useCallback((nextValue) => {
+        internalValueRef.current = nextValue;
+        if (onChange) {
+            onChange(nextValue);
+        }
+    }, [onChange]);
+    // We update the `internalValue` each time the `value` prop is updated
+    useEffect(() => {
+        if (lodashExports.isEqual(value, previousValue)) {
+            return;
+        }
+        internalValueRef.current = value;
+        forceUpdate();
+    }, [forceUpdate, previousValue, value]);
+    return { controlledOnChange, controlledValue };
+}
+
+function getRsuiteValueFromOptionValue(optionValue, optionValueKey) {
+    return optionValue !== undefined ? String(optionValueKey ? optionValue[optionValueKey] : optionValue) : undefined;
+}
+
 function getRsuiteDataFromOptions(options, optionValueKey) {
-    const getDataValueFromOptionValue = (value) => String(optionValueKey ? value[optionValueKey] : value);
     return options.map(({ value, ...rest }) => ({
         ...rest,
         optionValue: value,
-        value: getDataValueFromOptionValue(value)
+        value: getRsuiteValueFromOptionValue(value, 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, error, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-searchable = false, value, ...originalProps }) {
+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 controlledValue = useMemo(() => (!isUndefinedWhenDisabled || !originalProps.disabled ? value : undefined), [isUndefinedWhenDisabled, originalProps.disabled, value]);
+    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]);
-    const key = useKey([controlledValue, originalProps.disabled, originalProps.name]);
+    const key = useKey([disabled, originalProps.name, value]);
     const { forceUpdate } = useForceUpdate();
     const close = useCallback(() => {
         setIsOpen(false);
     }, []);
-    const handleClean = useCallback(() => {
-        selectedOptionValuesRef.current = [];
-        if (onChange) {
-            onChange(undefined);
-        }
-    }, [onChange]);
-    const handleSelect = useCallback((_, selectedItem) => {
-        const nextValues = toggleInCollection(selectedItem.optionValue, selectedOptionValuesRef.current);
-        selectedOptionValuesRef.current = nextValues;
-        if (onChange) {
-            const normalizedNextValue = !nextValues.length ? undefined : nextValues;
-            onChange(normalizedNextValue);
-        }
-    }, [onChange]);
+    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, options, optionValueKey]);
     const renderMenuItem = useCallback((node) => jsx("span", { title: String(node), children: String(node) }), []);
     const toggle = useCallback((event) => {
         let targetElement = event.target;
@@ -22335,14 +22335,14 @@ searchable = false, value, ...originalProps }) {
             setIsOpen(!isOpen);
         }
     }, [isOpen]);
-    useFieldUndefineEffect(isUndefinedWhenDisabled && originalProps.disabled, onChange);
+    useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange);
     useClickOutsideEffect(boxRef, close, baseContainer);
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { children: [jsx(Label, { disabled: originalProps.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, 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;
@@ -22465,30 +22465,18 @@ const Box$4 = styled.div `
   }
 `;
 
-function MultiRadio({ 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, error, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options, value }) {
-    // This tracks the component internal value which allows us to react to value changes after a radio toggling
-    const [internalValue, setInternalValue] = useState(value);
-    // and compare it with an eventual external value change (via the `value` prop)
-    const previousValue = usePrevious(value);
-    // to decide which on is the source of "truth" in `controlledValue` (the last one to be changed is the true value)
-    const controlledValue = useMemo(() => {
-        // If the `value` has changed, `value` takes precedence,
-        // otherwise we can use our current internal value
-        const nextControlledValue = lodashExports.isEqual(value, previousValue) ? internalValue : value;
-        return !isUndefinedWhenDisabled || !disabled ? nextControlledValue : undefined;
-    }, [disabled, internalValue, isUndefinedWhenDisabled, previousValue, value]);
+function MultiRadio({ disabled = false, error, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options, value }) {
+    const { controlledOnChange, controlledValue } = useFieldControl(value, onChange, {
+        disabled,
+        isUndefinedWhenDisabled
+    });
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const key = useKey([controlledValue, disabled, name]);
+    const key = useKey([disabled, name, value]);
     const handleChange = useCallback((nextOptionValue, isChecked) => {
         const nextCheckedOptionValue = isChecked ? nextOptionValue : undefined;
-        setInternalValue(nextCheckedOptionValue);
-        if (onChange) {
-            onChange(nextCheckedOptionValue);
-        }
-    }, [onChange]);
+        controlledOnChange(nextCheckedOptionValue);
+    }, [controlledOnChange]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange);
     return (jsxs(Fieldset, { disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(CheckboxesBox, { "$isInline": isInline, children: options.map(option => (jsx(Radio, { checked: equals(option.value, controlledValue), disabled: disabled, name: name, onChange: (_, isChecked) => handleChange(option.value, isChecked), children: option.label }, JSON.stringify(option.value)))) }), hasError && jsx(FieldError, { children: controlledError })] }, key));
 }
@@ -22530,9 +22518,7 @@ const CheckboxesBox = styled.div `
     `}
 `;
 
-function MultiZoneEditor({ addButtonLabel, defaultValue = [], 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, error, initialZone, isLabelHidden = false, isLight = false, label, labelPropName, onAdd, onCenter, onChange, onDelete, onEdit }) {
+function MultiZoneEditor({ addButtonLabel, defaultValue = [], disabled = false, error, initialZone, isLabelHidden = false, isLight = false, label, labelPropName, onAdd, onCenter, onChange, onDelete, onEdit }) {
     const prevDefaultValueRef = useRef(defaultValue);
     const [zones, setZones] = useState(defaultValue);
     const controlledError = useMemo(() => normalizeString(error), [error]);
@@ -22642,9 +22628,7 @@ function isNumeric(val) {
 }
 
 // TODO This field should return undefined when cleared (i.e.: Select all & Backspace/Delete)
-function DDCoordinatesInput({ coordinates, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, onChange }) {
+function DDCoordinatesInput({ coordinates, disabled = false, onChange }) {
     const latitudeInputRef = useRef();
     const longitudeInputRef = useRef();
     const [latitudeError, setLatitudeError] = useState('');
@@ -32638,9 +32622,7 @@ const coordinatesAreDistinct = (nextCoordinates, coordinates) => {
 // Open issue: https://github.com/uNmAnNeR/imaskjs/issues/761
 const UntypedIMaskInput = IMaskInput;
 // TODO This field should return undefined when cleared (i.e.: Select all & Backspace/Delete)
-function DMDCoordinatesInput({ coordinates, coordinatesFormat, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, onChange }) {
+function DMDCoordinatesInput({ coordinates, coordinatesFormat, disabled = false, onChange }) {
     const [error, setError] = useState('');
     const [value, setValue] = useState('');
     useEffect(() => {
@@ -32712,9 +32694,7 @@ const Box$2 = styled.div `
   text-align: left;
 `;
 
-function DMSCoordinatesInput({ coordinates, coordinatesFormat, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, onChange }) {
+function DMSCoordinatesInput({ coordinates, coordinatesFormat, disabled = false, onChange }) {
     /** Convert the coordinates to the [latitude, longitude] string format */
     const defaultValue = useMemo(() => {
         if (!coordinates?.length || !coordinatesFormat) {
@@ -32741,9 +32721,7 @@ const Box$1 = styled.div `
 
 const noop = () => { };
 
-function CoordinatesInput({ coordinatesFormat, defaultValue, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-error, isLabelHidden = false, isLight = false, label, onChange = noop, ...nativeProps }) {
+function CoordinatesInput({ coordinatesFormat, defaultValue, error, isLabelHidden = false, isLight = false, label, onChange = noop, ...nativeProps }) {
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const getCoordinatesInput = useCallback(() => {
@@ -32772,32 +32750,30 @@ const StyledFieldset = styled(Fieldset) `
   }
 `;
 
-function Select({ baseContainer, error, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-searchable = false, value, ...originalProps }) {
+function Select({ 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 [isOpen, setIsOpen] = useState(false);
     const { forceUpdate } = useForceUpdate();
-    const controlledValue = useMemo(() => (!isUndefinedWhenDisabled || !originalProps.disabled ? value : undefined), [isUndefinedWhenDisabled, originalProps.disabled, value]);
+    const { controlledOnChange, controlledValue } = useFieldControl(value, onChange, {
+        disabled,
+        isUndefinedWhenDisabled
+    });
+    const controlledRsuiteValue = useMemo(() => getRsuiteValueFromOptionValue(controlledValue, optionValueKey), [controlledValue, optionValueKey]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const data = useMemo(() => getRsuiteDataFromOptions(options, optionValueKey), [options, optionValueKey]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const key = useKey([controlledValue, originalProps.disabled, originalProps.name]);
+    const key = useKey([disabled, originalProps.name, value]);
     const close = useCallback(() => {
         setIsOpen(false);
     }, []);
     const handleClean = useCallback(() => {
-        if (onChange) {
-            onChange(undefined);
-        }
-    }, [onChange]);
+        controlledOnChange(undefined);
+    }, [controlledOnChange]);
     const handleSelect = useCallback((_, selectedItem) => {
         close();
-        if (onChange) {
-            onChange(selectedItem.optionValue);
-        }
-    }, [close, onChange]);
+        controlledOnChange(selectedItem.optionValue);
+    }, [close, controlledOnChange]);
     const renderMenuItem = useCallback((node) => jsx("span", { title: String(node), children: String(node) }), []);
     const toggle = useCallback((event) => {
         let targetElement = event.target;
@@ -32814,14 +32790,14 @@ searchable = false, value, ...originalProps }) {
             setIsOpen(!isOpen);
         }
     }, [isOpen]);
-    useFieldUndefineEffect(isUndefinedWhenDisabled && originalProps.disabled, onChange);
+    useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange);
     useClickOutsideEffect(boxRef, close, baseContainer);
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, onClick: toggle, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, container: boxRef.current, data: data, id: originalProps.name, onClean: handleClean, 
+    return (jsxs(Field$2, { children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, onClick: toggle, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, container: boxRef.current, data: data, disabled: disabled, id: originalProps.name, onClean: handleClean, 
                     // 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 })] }));
+                    onSelect: handleSelect, open: isOpen, renderMenuItem: renderMenuItem, searchable: searchable, value: controlledRsuiteValue, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledSelectPicker = styled(SelectPicker) `
   > .rs-picker-toggle {