@mtes-mct/monitor-ui 2.11.0 → 2.12.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.11.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.10.0...v2.11.0) (2023-02-07)
+
+
+### Features
+
+* **formiks:** set value to undefined on destroy ([8d810ad](https://github.com/MTES-MCT/monitor-ui/commit/8d810ad5dae3990628b3a63744adcc5fb339a3ad))
+
 # [2.10.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.9.5...v2.10.0) (2023-01-31)
 
 

package/index.js

@@ -2794,7 +2794,7 @@ const FieldError = styled.p `
   margin-top: 4px;
 `;
 
-const useClickOutside = (zoneRefOrzoneRefs, action, baseContainer) => {
+const useClickOutsideEffect = (zoneRefOrzoneRefs, action, baseContainer) => {
     const handleClickOutside = useCallback((event) => {
         const eventTarget = event.target;
         const zoneRefs = Array.isArray(zoneRefOrzoneRefs) ? zoneRefOrzoneRefs : [zoneRefOrzoneRefs];
@@ -2813,6 +2813,21 @@ const useClickOutside = (zoneRefOrzoneRefs, action, baseContainer) => {
     }, [baseContainer, handleClickOutside]);
 };
 
+function useFieldUndefineEffect(
+// eslint-disable-next-line @typescript-eslint/naming-convention
+disabled, onChange) {
+    useEffect(() => {
+        if (disabled && onChange) {
+            onChange(undefined);
+        }
+        return () => {
+            if (onChange) {
+                onChange(undefined);
+            }
+        };
+    }, [disabled, onChange]);
+}
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -3343,7 +3358,8 @@ function AutoComplete({ baseContainer, defaultValue, error, isLabelHidden, isLig
         }
         setDefaultControlledValue(defaultValue);
     }, [defaultValue]);
-    useClickOutside(boxRef, close, baseContainer);
+    useFieldUndefineEffect(originalProps.disabled, onChange);
+    useClickOutsideEffect(boxRef, close, baseContainer);
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
@@ -3377,7 +3393,9 @@ const Box$9 = styled.div `
   }
 `;
 
-function Checkbox({ label, onChange, ...originalProps }) {
+function Checkbox({ error, label, onChange, ...originalProps }) {
+    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 handleChange = useCallback((_, isChecked) => {
         if (!onChange) {
@@ -3385,7 +3403,8 @@ function Checkbox({ label, onChange, ...originalProps }) {
         }
         onChange(isChecked);
     }, [onChange]);
-    return (jsx(StyledCheckbox, { id: originalProps.name, onChange: handleChange, ...originalProps, children: label }, key));
+    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 })] }));
 }
 const StyledCheckbox = styled(Checkbox$1) `
   > .rs-checkbox-checker {
@@ -4246,7 +4265,7 @@ disabled = false, isCompact, isEndDate = false, isLight, isStartDate = false, mi
         const nextTimeTuple = [hourInputRef.current.value, minuteInputRef.current.value];
         onChange(nextTimeTuple);
     }, [closeRangedTimePicker, onChange]);
-    useClickOutside(boxRef, closeRangedTimePicker, baseContainer);
+    useClickOutsideEffect(boxRef, closeRangedTimePicker, baseContainer);
     return (jsxs(Box$6, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isFocused, "$isLight": isLight, children: [jsxs(InputGroup, { children: [jsxs("div", { children: [jsx(NumberInput$1, { ref: hourInputRef, "aria-label": `Heure${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: controlledDefaultValue && controlledDefaultValue[0], disabled: disabled, isLight: isLight, max: 23, min: 0, onBack: handleBack, onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: handleHourInput, onNext: () => minuteInputRef.current.focus(), onPrevious: onPrevious, size: 2 }), ":", jsx(NumberInput$1, { ref: minuteInputRef, "aria-label": `Minute${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: controlledDefaultValue && controlledDefaultValue[1], disabled: disabled, isLight: isLight, max: 59, min: 0, onBack: () => hourInputRef.current.focus(), onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => hourInputRef.current.focus(), size: 2 })] }), !isCompact && jsx(Clock, {})] }), isRangedTimePickerOpenRef.current && (jsx(RangedTimePicker, { filter: rangedTimePickerFilter, minutesRange: minutesRange, onChange: handleRangedTimePickedChange }))] }));
 }
 const TimeInput = forwardRef(TimeInputWithRef);
@@ -4492,7 +4511,7 @@ const Box$5 = styled.div `
 
 function DatePicker({ baseContainer, defaultValue, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
+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();
@@ -4501,6 +4520,8 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
     const selectedLocalizedDateTupleRef = useRef(getDateTupleFromDate(selectedLocalizedDateRef.current));
     const selectedLocalizedTimeTupleRef = useRef(getTimeTupleFromDate(selectedLocalizedDateRef.current));
     const { forceUpdate } = useForceUpdate();
+    const controlledError = useMemo(() => normalizeString(error), [error]);
+    const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const rangeCalendarPickerDefaultValue = useMemo(() => selectedLocalizedDateTupleRef.current
         ? getDateFromDateAndTimeTuple(selectedLocalizedDateTupleRef.current, ['00', '00'])
         : undefined, 
@@ -4579,8 +4600,9 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         isCalendarPickerOpenRef.current = true;
         forceUpdate();
     }, [forceUpdate]);
-    useClickOutside(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) }) }))] }), jsx(CalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isCalendarPickerOpenRef.current, onChange: handleCalendarPickerChange })] }));
+    useFieldUndefineEffect(disabled, onChange);
+    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 })] }));
 }
 const Box$4 = styled.div `
   * {
@@ -4807,7 +4829,7 @@ var DateRangePosition;
 
 function DateRangePicker({ baseContainer, defaultValue, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
+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();
@@ -4820,6 +4842,8 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
     const selectedLocalizedStartTimeTupleRef = useRef(getTimeTupleFromDate(selectedLocalizedStartDateRef.current));
     const selectedLocalizedEndTimeTupleRef = useRef(getTimeTupleFromDate(selectedLocalizedEndDateRef.current));
     const { forceUpdate } = useForceUpdate();
+    const controlledError = useMemo(() => normalizeString(error), [error]);
+    const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const rangeCalendarPickerDefaultValue = useMemo(() => selectedLocalizedStartDateTupleRef.current && selectedLocalizedEndDateTupleRef.current
         ? [
             getDateFromDateAndTimeTuple(selectedLocalizedStartDateTupleRef.current, ['00', '00']),
@@ -4954,8 +4978,9 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         isRangeCalendarPickerOpenRef.current = true;
         forceUpdate();
     }, [forceUpdate]);
-    useClickOutside([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) }) }))] }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
+    useFieldUndefineEffect(disabled, onChange);
+    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 })] }));
 }
 const Box$2 = styled.div `
   * {
@@ -4986,8 +5011,12 @@ const Field = styled.span `
 }};
 `;
 
-function MultiCheckbox({ defaultValue = [], isInline = false, isLabelHidden = false, isLight = false, label, name, onChange, options }) {
+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 controlledError = useMemo(() => normalizeString(error), [error]);
+    const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useMemo(() => `${name}-${JSON.stringify(defaultValue)}`, [defaultValue, name]);
     const handleChange = useCallback((nextOptionValue, isChecked) => {
         const nextCheckedOptionValues = isChecked
@@ -4999,9 +5028,10 @@ function MultiCheckbox({ defaultValue = [], isInline = false, isLabelHidden = fa
             onChange(normalizedNextValue);
         }
     }, [onChange]);
-    return (jsx(Fieldset, { isHidden: isLabelHidden, isLight: isLight, legend: label, children: jsx(ChecboxesBox$1, { "$isInline": isInline, children: options.map((option, index) => (jsx(Checkbox
-            // eslint-disable-next-line react/no-array-index-key
-            , { defaultChecked: defaultValue.includes(option.value), label: option.label, name: `${name}${index}`, onChange: (isChecked) => handleChange(option.value, isChecked) }, `${name}-${index}`))) }) }, key));
+    useFieldUndefineEffect(disabled, onChange);
+    return (jsxs(Fieldset, { isHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(ChecboxesBox$1, { "$isInline": isInline, children: options.map((option, index) => (jsx(Checkbox
+                // eslint-disable-next-line react/no-array-index-key
+                , { defaultChecked: defaultValue.includes(option.value), disabled: disabled, label: option.label, name: `${name}${index}`, onChange: (isChecked) => handleChange(option.value, isChecked) }, `${name}-${index}`))) }), hasError && jsx(FieldError, { children: controlledError })] }, key));
 }
 const ChecboxesBox$1 = styled.div `
   color: ${p => p.theme.color.gunMetal};
@@ -5056,7 +5086,8 @@ searchable = false, ...originalProps }) {
             setIsOpen(!isOpen);
         }
     }, [isOpen]);
-    useClickOutside(boxRef, close, baseContainer);
+    useFieldUndefineEffect(originalProps.disabled, onChange);
+    useClickOutsideEffect(boxRef, close, baseContainer);
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
@@ -5140,8 +5171,12 @@ const Box$1 = styled.div `
   }
 `;
 
-function MultiRadio({ defaultValue, isInline = false, isLabelHidden = false, isLight = false, label, name, onChange, options }) {
+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 controlledError = useMemo(() => normalizeString(error), [error]);
+    const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useMemo(() => `${name}-${String(checkedOptionValue)}}`, [checkedOptionValue, name]);
     const handleChange = useCallback((nextOptionValue, isChecked) => {
         const nextCheckedOptionValue = isChecked ? nextOptionValue : undefined;
@@ -5150,6 +5185,7 @@ function MultiRadio({ defaultValue, isInline = false, isLabelHidden = false, isL
             onChange(nextCheckedOptionValue);
         }
     }, [onChange]);
+    useFieldUndefineEffect(disabled, onChange);
     // TODO There may be a better solution.
     // A key change is not enough to force radio checked check changes
     // on `defaultValue` property update (even when appending `defaultValue` to `key`),
@@ -5157,9 +5193,9 @@ function MultiRadio({ defaultValue, isInline = false, isLabelHidden = false, isL
     useEffect(() => {
         setCheckedOptionValue(defaultValue);
     }, [defaultValue]);
-    return (jsx(Fieldset, { isHidden: 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, name: name, onChange: (_, isChecked) => handleChange(option.value, isChecked), children: option.label }, `${name}-${index}`))) }) }, key));
+    return (jsxs(Fieldset, { isHidden: 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));
 }
 const ChecboxesBox = styled.div `
   color: ${p => p.theme.color.gunMetal};
@@ -5194,9 +5230,11 @@ const ChecboxesBox = styled.div `
     `}
 `;
 
-function MultiZoneEditor({ addButtonLabel, defaultValue = [], initialZone, isLabelHidden = false, isLight = false, label, labelPropName, onAdd, onCenter, onDelete, onEdit }) {
+function MultiZoneEditor({ addButtonLabel, defaultValue = [], error, initialZone, isLabelHidden = false, isLight = false, label, labelPropName, onAdd, onCenter, onDelete, onEdit }) {
     const prevDefaultValueRef = useRef(defaultValue);
     const [zones, setZones] = useState(defaultValue);
+    const controlledError = useMemo(() => normalizeString(error), [error]);
+    const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const addZone = useCallback(() => {
         const nextZones = [...zones, initialZone];
         if (onAdd) {
@@ -5229,7 +5267,7 @@ function MultiZoneEditor({ addButtonLabel, defaultValue = [], initialZone, isLab
     }, [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) => (
                 // 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}`))) })] }));
+                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 })] }));
 }
 const Row = styled.div `
   align-items: center;
@@ -5260,7 +5298,9 @@ const Link = styled.a `
   }
 `;
 
-function NumberInput({ isLabelHidden = false, isLight = false, label, onChange, ...originalProps }) {
+function NumberInput({ error, isLabelHidden = false, isLight = false, label, onChange, ...originalProps }) {
+    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 handleChange = useCallback((nextValue) => {
         if (!onChange) {
@@ -5271,7 +5311,8 @@ function NumberInput({ isLabelHidden = false, isLight = false, label, onChange,
         const normalizedNextValue = !Number.isNaN(nextValueAsNumber) ? nextValueAsNumber : undefined;
         onChange(normalizedNextValue);
     }, [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)] }));
+    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 })] }));
 }
 const StyledInput$2 = styled(Input) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
@@ -5314,7 +5355,8 @@ searchable = false, ...originalProps }) {
             setIsOpen(!isOpen);
         }
     }, [isOpen]);
-    useClickOutside(boxRef, close, baseContainer);
+    useFieldUndefineEffect(originalProps.disabled, onChange);
+    useClickOutsideEffect(boxRef, close, baseContainer);
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
@@ -5368,8 +5410,10 @@ const Box = styled.div `
   }
 `;
 
-function Textarea({ isLabelHidden = false, isLight = false, label, onChange, rows = 3, ...originalProps }) {
+function Textarea({ error, isLabelHidden = false, isLight = false, label, onChange, rows = 3, ...originalProps }) {
     const inputRef = useRef();
+    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 handleChange = useCallback(() => {
         if (!onChange) {
@@ -5379,7 +5423,8 @@ function Textarea({ isLabelHidden = false, isLight = false, label, onChange, row
         const normalizedNextValue = nextValue.length ? nextValue : undefined;
         onChange(normalizedNextValue);
     }, [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)] }));
+    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 })] }));
 }
 const StyledInput$1 = styled(Input) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
@@ -5393,7 +5438,9 @@ const StyledInput$1 = styled(Input) `
   }
 `;
 
-function TextInput({ isLabelHidden = false, isLight = false, label, onChange, ...originalProps }) {
+function TextInput({ error, isLabelHidden = false, isLight = false, label, onChange, ...originalProps }) {
+    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 handleChange = useCallback((nextValue) => {
         if (!onChange) {
@@ -5402,7 +5449,8 @@ function TextInput({ isLabelHidden = false, isLight = false, label, onChange, ..
         const normalizedNextValue = nextValue && nextValue.trim().length ? nextValue : undefined;
         onChange(normalizedNextValue);
     }, [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)] }));
+    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 })] }));
 }
 const StyledInput = styled(Input) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
@@ -5416,56 +5464,48 @@ const StyledInput = styled(Input) `
 `;
 
 function FormikAutoComplete({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
-    // eslint-disable-next-line react-hooks/exhaustive-deps, @typescript-eslint/naming-convention
+    const [field, meta, helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    useEffect(() => () => {
-        helpers.setValue(undefined);
-    }, 
+    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
+    const handleChange = useMemo(() => helpers.setValue, []);
     if (!defaultValue) {
         return jsx(AutoComplete, { name: name, onChange: helpers.setValue, ...originalProps });
     }
-    return jsx(AutoComplete, { defaultValue: defaultValue, name: name, onChange: helpers.setValue, ...originalProps });
+    return (jsx(AutoComplete, { defaultValue: defaultValue, error: error, name: name, onChange: handleChange, ...originalProps }));
 }
 
 function FormikCheckbox({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
-    // eslint-disable-next-line react-hooks/exhaustive-deps, @typescript-eslint/naming-convention
-    const defaultChecked = useMemo(() => Boolean(field.value), []);
-    useEffect(() => () => {
-        helpers.setValue(undefined);
-    }, 
+    const [field, meta, helpers] = useField(name);
+    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const handleChange = useMemo(() => helpers.setValue, []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    return jsx(Checkbox, { defaultChecked: defaultChecked, name: name, onChange: helpers.setValue, ...originalProps });
+    const isDefaultChecked = useMemo(() => Boolean(field.value), []);
+    return (jsx(Checkbox, { defaultChecked: isDefaultChecked, error: error, name: name, onChange: handleChange, ...originalProps }));
 }
 
 const UntypedDatePicker = DatePicker;
 function FormikDatePicker({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
+    const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    useEffect(() => () => {
-        helpers.setValue(undefined);
-    }, 
+    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    return jsx(UntypedDatePicker, { defaultValue: defaultValue, onChange: helpers.setValue, ...originalProps });
+    const handleChange = useMemo(() => helpers.setValue, []);
+    return jsx(UntypedDatePicker, { defaultValue: defaultValue, error: error, onChange: handleChange, ...originalProps });
 }
 
 const UntypedDateRangePicker = DateRangePicker;
 function FormikDateRangePicker({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
+    const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    useEffect(() => () => {
-        helpers.setValue(undefined);
-    }, 
+    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    return jsx(UntypedDateRangePicker, { defaultValue: defaultValue, onChange: helpers.setValue, ...originalProps });
+    const handleChange = useMemo(() => helpers.setValue, []);
+    return jsx(UntypedDateRangePicker, { defaultValue: defaultValue, error: error, onChange: handleChange, ...originalProps });
 }
 
 function FormikEffect({ onChange }) {
@@ -5477,51 +5517,43 @@ function FormikEffect({ onChange }) {
 }
 
 function FormikMultiCheckbox({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
+    const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    useEffect(() => () => {
-        helpers.setValue(undefined);
-    }, 
+    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    return jsx(MultiCheckbox, { defaultValue: defaultValue, name: name, onChange: helpers.setValue, ...originalProps });
+    const handleChange = useMemo(() => helpers.setValue, []);
+    return (jsx(MultiCheckbox, { defaultValue: defaultValue, error: error, name: name, onChange: handleChange, ...originalProps }));
 }
 
 function FormikMultiSelect({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
+    const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    useEffect(() => () => {
-        helpers.setValue(undefined);
-    }, 
+    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    return jsx(MultiSelect, { defaultValue: defaultValue, name: name, onChange: helpers.setValue, ...originalProps });
+    const handleChange = useMemo(() => helpers.setValue, []);
+    return (jsx(MultiSelect, { defaultValue: defaultValue, error: error, name: name, onChange: handleChange, ...originalProps }));
 }
 
 function FormikMultiRadio({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
+    const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    useEffect(() => () => {
-        helpers.setValue(undefined);
-    }, 
+    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    return jsx(MultiRadio, { defaultValue: defaultValue, name: name, onChange: helpers.setValue, ...originalProps });
+    const handleChange = useMemo(() => helpers.setValue, []);
+    return jsx(MultiRadio, { defaultValue: defaultValue, error: error, name: name, onChange: handleChange, ...originalProps });
 }
 
 function FormikNumberInput({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
+    const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    useEffect(() => () => {
-        helpers.setValue(undefined);
-    }, 
+    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    return jsx(NumberInput, { defaultValue: defaultValue, name: name, onChange: helpers.setValue, ...originalProps });
+    const handleChange = useMemo(() => helpers.setValue, []);
+    return (jsx(NumberInput, { defaultValue: defaultValue, error: error, name: name, onChange: handleChange, ...originalProps }));
 }
 
 function FormikSelect({ name, ...originalProps }) {
@@ -5529,39 +5561,32 @@ function FormikSelect({ name, ...originalProps }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
     const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
-    useEffect(() => () => {
-        helpers.setValue(undefined);
-    }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    return jsx(Select, { defaultValue: defaultValue, error: error, name: name, onChange: helpers.setValue, ...originalProps });
+    const handleChange = useMemo(() => helpers.setValue, []);
+    return jsx(Select, { defaultValue: defaultValue, error: error, name: name, onChange: handleChange, ...originalProps });
 }
 
 function FormikTextarea({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
+    const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    useEffect(() => () => {
-        helpers.setValue(undefined);
-    }, 
+    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    return jsx(Textarea, { defaultValue: defaultValue, name: name, onChange: helpers.setValue, ...originalProps });
+    const handleChange = useMemo(() => helpers.setValue, []);
+    return jsx(Textarea, { defaultValue: defaultValue, error: error, name: name, onChange: handleChange, ...originalProps });
 }
 
 function FormikTextInput({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
+    const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    useEffect(() => () => {
-        helpers.setValue(undefined);
-    }, 
+    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    return jsx(TextInput, { defaultValue: defaultValue, name: name, onChange: helpers.setValue, ...originalProps });
+    const handleChange = useMemo(() => helpers.setValue, []);
+    return jsx(TextInput, { defaultValue: defaultValue, error: error, name: name, onChange: handleChange, ...originalProps });
 }
 
 const noop = () => { };
 
-export { Accent, AutoComplete, Button, Checkbox, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikAutoComplete, FormikCheckbox, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NumberInput, OnlyFontGlobalStyle, Select, Size, THEME, Tag$1 as Tag, TagGroup, TextInput, Textarea, ThemeProvider, dayjs, getLocalizedDayjs, getUtcizedDayjs, noop, stopMouseEventPropagation, useClickOutside, useForceUpdate };
+export { Accent, AutoComplete, Button, Checkbox, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikAutoComplete, FormikCheckbox, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NumberInput, OnlyFontGlobalStyle, Select, Size, THEME, Tag$1 as Tag, TagGroup, TextInput, Textarea, ThemeProvider, dayjs, getLocalizedDayjs, getUtcizedDayjs, noop, stopMouseEventPropagation, useClickOutsideEffect, useForceUpdate };
 //# sourceMappingURL=index.js.map