@mtes-mct/monitor-ui 2.14.0 → 2.14.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.14.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.13.2...v2.14.0) (2023-02-07)
+
+
+### Features
+
+* **components:** add SingleTag ([0379159](https://github.com/MTES-MCT/monitor-ui/commit/0379159f6eec3a8d880e0f44f447bac8b5173bf8))
+
 ## [2.13.2](https://github.com/MTES-MCT/monitor-ui/compare/v2.13.1...v2.13.2) (2023-02-07)
 
 

package/index.js

@@ -1567,6 +1567,77 @@ _curry2(function equals(a, b) {
   return _equals(a, b, [], []);
 });
 
+function _indexOf(list, a, idx) {
+  var inf, item; // Array.prototype.indexOf doesn't exist below IE9
+
+  if (typeof list.indexOf === 'function') {
+    switch (typeof a) {
+      case 'number':
+        if (a === 0) {
+          // manually crawl the list to distinguish between +0 and -0
+          inf = 1 / a;
+
+          while (idx < list.length) {
+            item = list[idx];
+
+            if (item === 0 && 1 / item === inf) {
+              return idx;
+            }
+
+            idx += 1;
+          }
+
+          return -1;
+        } else if (a !== a) {
+          // NaN
+          while (idx < list.length) {
+            item = list[idx];
+
+            if (typeof item === 'number' && item !== item) {
+              return idx;
+            }
+
+            idx += 1;
+          }
+
+          return -1;
+        } // non-zero numbers can utilise Set
+
+
+        return list.indexOf(a, idx);
+      // all these types can utilise Set
+
+      case 'string':
+      case 'boolean':
+      case 'function':
+      case 'undefined':
+        return list.indexOf(a, idx);
+
+      case 'object':
+        if (a === null) {
+          // null can utilise Set
+          return list.indexOf(a, idx);
+        }
+
+    }
+  } // anything else not covered above, defer to R.equals
+
+
+  while (idx < list.length) {
+    if (equals(list[idx], a)) {
+      return idx;
+    }
+
+    idx += 1;
+  }
+
+  return -1;
+}
+
+function _includes(a, list) {
+  return _indexOf(list, a, 0) >= 0;
+}
+
 function _complement(f) {
   return function () {
     return !f.apply(this, arguments);
@@ -1720,6 +1791,33 @@ _curry3(function remove(start, count, list) {
   return result;
 });
 
+/**
+ * Returns `true` if the specified value is equal, in [`R.equals`](#equals)
+ * terms, to at least one element of the given list; `false` otherwise.
+ * Also works with strings.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.26.0
+ * @category List
+ * @sig a -> [a] -> Boolean
+ * @param {Object} a The item to compare against.
+ * @param {Array} list The array to consider.
+ * @return {Boolean} `true` if an equivalent item is in the list, `false` otherwise.
+ * @see R.any
+ * @example
+ *
+ *      R.includes(3, [1, 2, 3]); //=> true
+ *      R.includes(4, [1, 2, 3]); //=> false
+ *      R.includes({ name: 'Fred' }, [{ name: 'Fred' }]); //=> true
+ *      R.includes([42], [[42]]); //=> true
+ *      R.includes('ba', 'banana'); //=>true
+ */
+
+var includes =
+/*#__PURE__*/
+_curry2(_includes);
+
 /**
  * Creates a new object with the own properties of the two provided objects. If
  * a key exists in both objects, the provided function is applied to the key
@@ -2543,23 +2641,24 @@ const Field$2 = styled.div `
 const Label = styled.label `
   color: ${p => 
 // eslint-disable-next-line no-nested-ternary
-p.isDisabled ? p.theme.color.lightGray : p.hasError ? p.theme.color.maximumRed : p.theme.color.slateGray};
+p.disabled ? p.theme.color.lightGray : p.hasError ? p.theme.color.maximumRed : p.theme.color.slateGray};
   display: ${p => (p.isHidden ? 'none' : 'block')};
   font-size: 13px;
   line-height: 1.3846;
   margin-bottom: 4px;
 `;
 
-function Legend({ isDisabled = false, isHidden = false, ...nativeProps }) {
-    return jsx(StyledLabel, { as: "legend", isDisabled: isDisabled, isHidden: isHidden, ...nativeProps });
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function Legend({ disabled = false, isHidden = false, ...nativeProps }) {
+    return jsx(StyledLabel, { as: "legend", disabled: disabled, isHidden: isHidden, ...nativeProps });
 }
 const StyledLabel = styled(Label) `
   padding: 0;
 `;
 
-function Fieldset({ children, hasBorder = false, isHidden = false, isLight = false, legend, ...nativeProps }) {
+function Fieldset({ children, hasBorder = false, isLegendHidden = false, isLight = false, legend, ...nativeProps }) {
     const hasLegend = useMemo(() => Boolean(legend), [legend]);
-    return (jsxs(StyledField, { as: "fieldset", ...nativeProps, children: [legend && jsx(Legend, { isHidden: isHidden, children: legend }), jsx(Box$b, { "$hasBorder": hasBorder, "$hasLegend": hasLegend, "$isLight": isLight, children: children })] }));
+    return (jsxs(StyledField, { as: "fieldset", ...nativeProps, children: [legend && (jsx(Legend, { disabled: nativeProps.disabled, isHidden: isLegendHidden, children: legend })), jsx(Box$b, { "$hasBorder": hasBorder, "$hasLegend": hasLegend, "$isLight": isLight, children: children })] }));
 }
 const StyledField = styled(Field$2) `
   border: 0;
@@ -3203,17 +3302,18 @@ const useClickOutsideEffect = (zoneRefOrzoneRefs, action, baseContainer) => {
 
 function useFieldUndefineEffect(
 // eslint-disable-next-line @typescript-eslint/naming-convention
-disabled, onChange) {
+disabled, onChange, onDisable) {
     useEffect(() => {
-        if (disabled && onChange) {
+        if (!disabled) {
+            return;
+        }
+        if (onDisable) {
+            onDisable();
+        }
+        if (onChange) {
             onChange(undefined);
         }
-        return () => {
-            if (onChange) {
-                onChange(undefined);
-            }
-        };
-    }, [disabled, onChange]);
+    }, [disabled, onChange, onDisable]);
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -3674,6 +3774,26 @@ function useForceUpdate() {
     return { forceDebouncedUpdate, forceUpdate };
 }
 
+const getPseudoRandomString = () => Math.random().toString(36).slice(2);
+
+function usePrevious(value) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    }, [value]); // Only re-run if value changes
+    return ref.current;
+}
+
+function useKey(deps) {
+    const keyRef = useRef(getPseudoRandomString());
+    const prevDeps = usePrevious(deps);
+    if (!prevDeps || equals(deps, prevDeps)) {
+        return keyRef.current;
+    }
+    keyRef.current = getPseudoRandomString();
+    return keyRef.current;
+}
+
 /**
  * Trim and single-space a string
  */
@@ -3704,11 +3824,14 @@ function AutoComplete({ baseContainer, defaultValue, error, isLabelHidden, isLig
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const controlledOptions = useMemo(() => options ?? autoGeneratedOptions, [autoGeneratedOptions, options]);
     const controlledValueAsLabel = useMemo(() => {
+        if (originalProps.disabled) {
+            return undefined;
+        }
         const foundOption = controlledOptions.find(propEq('value', controlledDefaultValue));
         return foundOption ? foundOption.label : undefined;
-    }, [controlledDefaultValue, controlledOptions]);
+    }, [controlledDefaultValue, controlledOptions, originalProps.disabled]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(controlledDefaultValue)}`, [controlledDefaultValue, originalProps.name]);
+    const key = useKey([controlledDefaultValue, originalProps.disabled, originalProps.name]);
     const close = useCallback(() => {
         setIsOpen(false);
     }, []);
@@ -3751,7 +3874,7 @@ function AutoComplete({ baseContainer, defaultValue, error, isLabelHidden, isLig
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { children: [jsx(Label, { hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$9, { ref: boxRef, onClick: open, children: boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, data: controlledOptions, defaultValue: controlledValueAsLabel, id: originalProps.name, onChange: handleChange, onSelect: handleSelect, open: isOpen, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$9, { ref: boxRef, onClick: open, children: boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, data: controlledOptions, defaultValue: controlledValueAsLabel, id: originalProps.name, onChange: handleChange, onSelect: handleSelect, open: isOpen, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledAutoComplete = styled(AutoComplete$1) `
   font-size: 13px;
@@ -3781,10 +3904,14 @@ const Box$9 = styled.div `
   }
 `;
 
-function Checkbox({ error, label, onChange, ...originalProps }) {
+function Checkbox({ 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+defaultChecked, error, label, onChange, ...originalProps }) {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const controlledDefaultChecked = useMemo(() => (!originalProps.disabled ? defaultChecked : undefined), [defaultChecked, originalProps.disabled]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const key = useMemo(() => `${originalProps.name}-${String(originalProps.defaultChecked)}`, [originalProps.defaultChecked, originalProps.name]);
+    const key = useKey([controlledDefaultChecked, originalProps.disabled, originalProps.name]);
     const handleChange = useCallback((_, isChecked) => {
         if (!onChange) {
             return;
@@ -3792,7 +3919,7 @@ function Checkbox({ error, label, onChange, ...originalProps }) {
         onChange(isChecked);
     }, [onChange]);
     useFieldUndefineEffect(originalProps.disabled, onChange);
-    return (jsxs(Field$2, { children: [jsx(StyledCheckbox, { id: originalProps.name, onChange: handleChange, ...originalProps, children: label }, key), hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { children: [jsx(StyledCheckbox, { defaultChecked: controlledDefaultChecked, id: originalProps.name, onChange: handleChange, ...originalProps, children: label }, key), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledCheckbox = styled(Checkbox$1) `
   > .rs-checkbox-checker {
@@ -4625,6 +4752,11 @@ disabled = false, error, isCompact = false, isHistorical = false, isLabelHidden
             timeInputRef.current.focus();
         }
     }, [closeCalendarPicker, forceUpdate, submit, withTime]);
+    const handleDisable = useCallback(() => {
+        selectedLocalizedDateTupleRef.current = undefined;
+        selectedLocalizedTimeTupleRef.current = undefined;
+        forceUpdate();
+    }, [forceUpdate]);
     const handleTimeInputFilled = useCallback((nextTimeTuple) => {
         // If a date has already been selected
         if (selectedLocalizedDateTupleRef.current) {
@@ -4640,9 +4772,9 @@ disabled = false, error, isCompact = false, isHistorical = false, isLabelHidden
         isCalendarPickerOpenRef.current = true;
         forceUpdate();
     }, [forceUpdate]);
-    useFieldUndefineEffect(disabled, onChange);
+    useFieldUndefineEffect(disabled, onChange, handleDisable);
     useClickOutsideEffect(boxRef, closeCalendarPicker, baseContainer);
-    return (jsxs(Fieldset, { disabled: disabled, ...nativeProps, children: [jsx(Legend, { isDisabled: disabled, isHidden: isLabelHidden, children: label }), jsxs(Box$4, { ref: boxRef, children: [jsx(Field$1, { children: jsx(DateInput, { ref: dateInputRef, defaultValue: selectedLocalizedDateTupleRef.current, disabled: disabled, isCompact: isCompact, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputChange, onClick: openCalendarPicker, onNext: handleDateInputNext }) }), withTime && (jsx(Field$1, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, baseContainer: baseContainer, defaultValue: selectedLocalizedTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onPrevious: () => dateInputRef.current.focus(true) }) }))] }), hasError && jsx(FieldError, { children: controlledError }), jsx(CalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isCalendarPickerOpenRef.current, onChange: handleCalendarPickerChange })] }));
+    return (jsxs(Fieldset, { disabled: disabled, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$4, { ref: boxRef, children: [jsx(Field$1, { children: jsx(DateInput, { ref: dateInputRef, defaultValue: selectedLocalizedDateTupleRef.current, disabled: disabled, isCompact: isCompact, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputChange, onClick: openCalendarPicker, onNext: handleDateInputNext }) }), withTime && (jsx(Field$1, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, baseContainer: baseContainer, defaultValue: selectedLocalizedTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onPrevious: () => dateInputRef.current.focus(true) }) }))] }), hasError && jsx(FieldError, { children: controlledError }), jsx(CalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isCalendarPickerOpenRef.current, onChange: handleCalendarPickerChange })] }));
 }
 const Box$4 = styled.div `
   * {
@@ -4913,6 +5045,13 @@ disabled = false, error, isCompact = false, isHistorical = false, isLabelHidden
         isRangeCalendarPickerOpenRef.current = false;
         forceUpdate();
     }, [forceUpdate]);
+    const handleDisable = useCallback(() => {
+        selectedLocalizedStartDateTupleRef.current = undefined;
+        selectedLocalizedStartTimeTupleRef.current = undefined;
+        selectedLocalizedEndDateTupleRef.current = undefined;
+        selectedLocalizedEndTimeTupleRef.current = undefined;
+        forceUpdate();
+    }, [forceUpdate]);
     const handleEndDateInputNext = useCallback(() => {
         if (!withTime) {
             return;
@@ -5018,9 +5157,9 @@ disabled = false, error, isCompact = false, isHistorical = false, isLabelHidden
         isRangeCalendarPickerOpenRef.current = true;
         forceUpdate();
     }, [forceUpdate]);
-    useFieldUndefineEffect(disabled, onChange);
+    useFieldUndefineEffect(disabled, onChange, handleDisable);
     useClickOutsideEffect([endDateInputRef, startDateInputRef], closeRangeCalendarPicker, baseContainer);
-    return (jsxs(Fieldset, { ...nativeProps, children: [jsx(Legend, { isDisabled: disabled, isHidden: isLabelHidden, children: label }), jsxs(Box$2, { isDisabled: disabled, children: [jsx(Field, { children: jsx(DateInput, { ref: startDateInputRef, defaultValue: selectedLocalizedStartDateTupleRef.current, disabled: disabled, isCompact: isCompact, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isStartDate: true, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.START, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onNext: handleStartDateInputNext }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, baseContainer: baseContainer, defaultValue: selectedLocalizedStartTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isLight: isLight, isStartDate: true, minutesRange: minutesRange, onBack: () => startDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.START, nextTimeTuple), onFocus: closeRangeCalendarPicker, onNext: () => endDateInputRef.current.focus(), onPrevious: () => startDateInputRef.current.focus(true) }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, defaultValue: selectedLocalizedEndDateTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, onBack: handleEndDateInputPrevious, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.END, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, baseContainer: baseContainer, defaultValue: selectedLocalizedEndTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: true, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onPrevious: () => endDateInputRef.current.focus(true) }) }))] }), hasError && jsx(FieldError, { children: controlledError }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
+    return (jsxs(Fieldset, { disabled: disabled, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$2, { isDisabled: disabled, children: [jsx(Field, { children: jsx(DateInput, { ref: startDateInputRef, defaultValue: selectedLocalizedStartDateTupleRef.current, disabled: disabled, isCompact: isCompact, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isStartDate: true, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.START, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onNext: handleStartDateInputNext }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, baseContainer: baseContainer, defaultValue: selectedLocalizedStartTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isLight: isLight, isStartDate: true, minutesRange: minutesRange, onBack: () => startDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.START, nextTimeTuple), onFocus: closeRangeCalendarPicker, onNext: () => endDateInputRef.current.focus(), onPrevious: () => startDateInputRef.current.focus(true) }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, defaultValue: selectedLocalizedEndDateTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, onBack: handleEndDateInputPrevious, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.END, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, baseContainer: baseContainer, defaultValue: selectedLocalizedEndTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: true, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onPrevious: () => endDateInputRef.current.focus(true) }) }))] }), hasError && jsx(FieldError, { children: controlledError }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
 }
 const Box$2 = styled.div `
   * {
@@ -5055,9 +5194,10 @@ function MultiCheckbox({ defaultValue = [],
 // eslint-disable-next-line @typescript-eslint/naming-convention
 disabled = false, error, isInline = false, isLabelHidden = false, isLight = false, label, name, onChange, options }) {
     const checkedOptionValues = useRef(defaultValue);
+    const controlledDefaultValue = useMemo(() => (!disabled ? defaultValue : undefined), [defaultValue, disabled]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const key = useMemo(() => `${name}-${JSON.stringify(defaultValue)}`, [defaultValue, name]);
+    const key = useKey([controlledDefaultValue, disabled, name]);
     const handleChange = useCallback((nextOptionValue, isChecked) => {
         const nextCheckedOptionValues = isChecked
             ? [...checkedOptionValues.current, nextOptionValue]
@@ -5069,10 +5209,10 @@ disabled = false, error, isInline = false, isLabelHidden = false, isLight = fals
         }
     }, [onChange]);
     useFieldUndefineEffect(disabled, onChange);
-    const checkboxesElement = useMemo(() => (jsx(Fragment, { children: options.map((option, index) => (jsx(Checkbox, { defaultChecked: defaultValue.includes(option.value), disabled: disabled, label: option.label, name: `${name}${index}`, onChange: (isChecked) => handleChange(option.value, isChecked) }, String(option.value)))) })), 
+    const checkboxesElement = useMemo(() => (jsx(Fragment, { children: options.map((option, index) => (jsx(Checkbox, { defaultChecked: includes(option.value, controlledDefaultValue || []), disabled: disabled, label: option.label, name: `${name}${index}`, onChange: (isChecked) => handleChange(option.value, isChecked) }, String(option.value)))) })), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [disabled, handleChange, name, options]);
-    return (jsxs(Fieldset, { isHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(ChecboxesBox$1, { "$isInline": isInline, children: checkboxesElement }), hasError && jsx(FieldError, { children: controlledError })] }, key));
+    return (jsxs(Fieldset, { disabled: disabled, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(ChecboxesBox$1, { "$isInline": isInline, children: checkboxesElement }), hasError && jsx(FieldError, { children: controlledError })] }, key));
 }
 const ChecboxesBox$1 = styled.div `
   color: ${p => p.theme.color.gunMetal};
@@ -5104,15 +5244,16 @@ const ChecboxesBox$1 = styled.div `
     `}
 `;
 
-function MultiSelect({ baseContainer, error, fixedWidth, isLabelHidden = false, isLight = false, label, onChange, options, 
+function MultiSelect({ baseContainer, defaultValue, error, fixedWidth, isLabelHidden = false, isLight = false, label, onChange, options, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 searchable = false, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
+    const controlledDefaultValue = useMemo(() => (!originalProps.disabled ? defaultValue : undefined), [defaultValue, originalProps.disabled]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const key = useKey([controlledDefaultValue, originalProps.disabled, originalProps.name]);
     const { forceUpdate } = useForceUpdate();
     const close = useCallback(() => {
         setIsOpen(false);
@@ -5142,7 +5283,7 @@ searchable = false, ...originalProps }) {
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { children: [jsx(Label, { hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$1, { ref: boxRef, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current, data: options, id: originalProps.name, onChange: handleChange, onClick: toggle, open: isOpen, searchable: searchable, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$1, { ref: boxRef, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current, data: options, defaultValue: controlledDefaultValue, id: originalProps.name, onChange: handleChange, onClick: toggle, open: isOpen, searchable: searchable, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const Box$1 = styled.div `
   position: relative;
@@ -5225,28 +5366,29 @@ const Box$1 = styled.div `
 function MultiRadio({ defaultValue, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 disabled = false, error, isInline = false, isLabelHidden = false, isLight = false, label, name, onChange, options }) {
-    const [checkedOptionValue, setCheckedOptionValue] = useState(undefined);
+    const [controlledDefaultValue, setControlledDefaultValue] = useState(undefined);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const key = useMemo(() => `${name}-${String(checkedOptionValue)}}`, [checkedOptionValue, name]);
+    const key = useKey([controlledDefaultValue, disabled, name]);
     const handleChange = useCallback((nextOptionValue, isChecked) => {
         const nextCheckedOptionValue = isChecked ? nextOptionValue : undefined;
-        setCheckedOptionValue(nextCheckedOptionValue);
+        setControlledDefaultValue(nextCheckedOptionValue);
         if (onChange) {
             onChange(nextCheckedOptionValue);
         }
     }, [onChange]);
     useFieldUndefineEffect(disabled, onChange);
-    // TODO There may be a better solution.
+    // TODO There may be a better solution. Replace the map with a rendering memo?
     // A key change is not enough to force radio checked check changes
     // on `defaultValue` property update (even when appending `defaultValue` to `key`),
     // we need to force a second re-render in order for the changes to be applied.
     useEffect(() => {
-        setCheckedOptionValue(defaultValue);
-    }, [defaultValue]);
-    return (jsxs(Fieldset, { isHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(ChecboxesBox, { "$isInline": isInline, children: options.map((option, index) => (jsx(Radio
+        const nextControlledDefaultValue = !disabled ? defaultValue : undefined;
+        setControlledDefaultValue(nextControlledDefaultValue);
+    }, [defaultValue, disabled]);
+    return (jsxs(Fieldset, { disabled: disabled, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(ChecboxesBox, { "$isInline": isInline, children: options.map((option, index) => (jsx(Radio
                 // eslint-disable-next-line react/no-array-index-key
-                , { defaultChecked: option.value === checkedOptionValue, disabled: disabled, name: name, onChange: (_, isChecked) => handleChange(option.value, isChecked), children: option.label }, `${name}-${index}`))) }), hasError && jsx(FieldError, { children: controlledError })] }, key));
+                , { defaultChecked: equals(option.value, controlledDefaultValue), disabled: disabled, name: name, onChange: (_, isChecked) => handleChange(option.value, isChecked), children: option.label }, `${key}-${index}`))) }), hasError && jsx(FieldError, { children: controlledError })] }, key));
 }
 const ChecboxesBox = styled.div `
   color: ${p => p.theme.color.gunMetal};
@@ -5282,7 +5424,9 @@ const ChecboxesBox = styled.div `
     `}
 `;
 
-function MultiZoneEditor({ addButtonLabel, defaultValue = [], error, initialZone, isLabelHidden = false, isLight = false, label, labelPropName, onAdd, onCenter, onDelete, onEdit }) {
+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 }) {
     const prevDefaultValueRef = useRef(defaultValue);
     const [zones, setZones] = useState(defaultValue);
     const controlledError = useMemo(() => normalizeString(error), [error]);
@@ -5311,13 +5455,17 @@ function MultiZoneEditor({ addButtonLabel, defaultValue = [], error, initialZone
             onEdit(zone, index);
         }
     }, [onEdit]);
+    const handleDisable = useCallback(() => {
+        setZones([]);
+    }, []);
     useEffect(() => {
         if (equals(defaultValue, prevDefaultValueRef.current)) {
             return;
         }
         setZones(defaultValue);
     }, [defaultValue]);
-    return (jsxs(Fieldset, { isHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(Button, { accent: Accent.SECONDARY, Icon: Plus, isFullWidth: true, onClick: addZone, children: addButtonLabel }), jsx(Fragment, { children: zones.map((zone, index) => (
+    useFieldUndefineEffect(disabled, onChange, handleDisable);
+    return (jsxs(Fieldset, { disabled: disabled, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(Button, { accent: Accent.SECONDARY, disabled: disabled, Icon: Plus, isFullWidth: true, onClick: addZone, children: addButtonLabel }), jsx(Fragment, { children: zones.map((zone, index) => (
                 // eslint-disable-next-line react/no-array-index-key
                 jsxs(Row, { children: [jsxs(ZoneWrapper, { children: [zone[labelPropName], jsxs(Link, { onClick: () => centerZone(zone), children: [jsx(SelectRectangle, {}), jsx("span", { children: "Centrer sur la carte" })] })] }), jsx(IconButton, { accent: Accent.SECONDARY, Icon: Edit, onClick: () => editZone(index, zone) }), jsx(IconButton, { accent: Accent.SECONDARY, "aria-label": "Supprimer cette zone", Icon: Delete, onClick: () => deleteZone(index) })] }, `zone-${index}`))) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
@@ -5350,10 +5498,11 @@ const Link = styled.a `
   }
 `;
 
-function NumberInput({ error, isLabelHidden = false, isLight = false, label, onChange, ...originalProps }) {
+function NumberInput({ defaultValue, error, isLabelHidden = false, isLight = false, label, onChange, ...originalProps }) {
+    const controlledDefaultValue = useMemo(() => (!originalProps.disabled ? defaultValue : undefined), [defaultValue, originalProps.disabled]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const key = useKey([controlledDefaultValue, originalProps.disabled, originalProps.name]);
     const handleChange = useCallback((nextValue) => {
         if (!onChange) {
             return;
@@ -5364,7 +5513,7 @@ function NumberInput({ error, isLabelHidden = false, isLight = false, label, onC
         onChange(normalizedNextValue);
     }, [onChange]);
     useFieldUndefineEffect(originalProps.disabled, onChange);
-    return (jsxs(Field$2, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$2, { "$isLight": isLight, id: originalProps.name, onChange: handleChange, type: "number", ...originalProps }, key), hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { children: [jsx(Label, { disabled: originalProps.disabled, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$2, { "$isLight": isLight, defaultValue: controlledDefaultValue, id: originalProps.name, onChange: handleChange, type: "number", ...originalProps }, key), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledInput$2 = styled(Input) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
@@ -5373,16 +5522,17 @@ const StyledInput$2 = styled(Input) `
   width: 100%;
 `;
 
-function Select({ baseContainer, error, isLabelHidden = false, isLight = false, label, onChange, options, 
+function Select({ baseContainer, defaultValue, error, isLabelHidden = false, isLight = false, label, onChange, options, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 searchable = false, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
     const { forceUpdate } = useForceUpdate();
+    const controlledDefaultValue = useMemo(() => (!originalProps.disabled ? defaultValue : undefined), [defaultValue, originalProps.disabled]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const key = useKey([controlledDefaultValue, originalProps.disabled, originalProps.name]);
     const close = useCallback(() => {
         setIsOpen(false);
     }, []);
@@ -5412,7 +5562,7 @@ searchable = false, ...originalProps }) {
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { children: [jsx(Label, { 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: options, id: originalProps.name, 
+    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: options, defaultValue: controlledDefaultValue, id: originalProps.name, 
                     // The `unknown` type from Rsuite library is wrong. It should be inferred from `data` prop type.
                     // `onChange: ((value: unknown, event: React.SyntheticEvent<Element, Event>) => void) | undefined`
                     onChange: handleChange, open: isOpen, searchable: searchable, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
@@ -5462,11 +5612,12 @@ const Box = styled.div `
   }
 `;
 
-function Textarea({ error, isLabelHidden = false, isLight = false, label, onChange, rows = 3, ...originalProps }) {
+function Textarea({ defaultValue, error, isLabelHidden = false, isLight = false, label, onChange, rows = 3, ...originalProps }) {
     const inputRef = useRef();
+    const controlledDefaultValue = useMemo(() => (!originalProps.disabled ? defaultValue : undefined), [defaultValue, originalProps.disabled]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const key = useKey([controlledDefaultValue, originalProps.disabled, originalProps.name]);
     const handleChange = useCallback(() => {
         if (!onChange) {
             return;
@@ -5476,7 +5627,7 @@ function Textarea({ error, isLabelHidden = false, isLight = false, label, onChan
         onChange(normalizedNextValue);
     }, [onChange]);
     useFieldUndefineEffect(originalProps.disabled, onChange);
-    return (jsxs(Field$2, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$1, { ref: inputRef, "$isLight": isLight, as: "textarea", id: originalProps.name, onChange: handleChange, rows: rows, ...originalProps }, key), hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { children: [jsx(Label, { disabled: originalProps.disabled, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$1, { ref: inputRef, "$isLight": isLight, as: "textarea", defaultValue: controlledDefaultValue, id: originalProps.name, onChange: handleChange, rows: rows, ...originalProps }, key), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledInput$1 = styled(Input) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
@@ -5490,10 +5641,11 @@ const StyledInput$1 = styled(Input) `
   }
 `;
 
-function TextInput({ error, isLabelHidden = false, isLight = false, label, onChange, ...originalProps }) {
+function TextInput({ defaultValue, error, isLabelHidden = false, isLight = false, label, onChange, ...originalProps }) {
+    const controlledDefaultValue = useMemo(() => (!originalProps.disabled ? defaultValue : undefined), [defaultValue, originalProps.disabled]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const key = useKey([controlledDefaultValue, originalProps.disabled, originalProps.name]);
     const handleChange = useCallback((nextValue) => {
         if (!onChange) {
             return;
@@ -5502,7 +5654,7 @@ function TextInput({ error, isLabelHidden = false, isLight = false, label, onCha
         onChange(normalizedNextValue);
     }, [onChange]);
     useFieldUndefineEffect(originalProps.disabled, onChange);
-    return (jsxs(Field$2, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput, { "$isLight": isLight, id: originalProps.name, onChange: handleChange, type: "text", ...originalProps }, key), hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { children: [jsx(Label, { disabled: originalProps.disabled, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput, { "$isLight": isLight, defaultValue: controlledDefaultValue, id: originalProps.name, onChange: handleChange, type: "text", ...originalProps }, key), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledInput = styled(Input) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};