@mtes-mct/monitor-ui 4.0.7 → 5.0.0

package/index.js

@@ -3475,7 +3475,7 @@ const useClickOutsideEffect = (zoneRefOrzoneRefs, action, baseContainer) => {
     const handleClickOutside = useCallback((event) => {
         const eventTarget = event.target;
         const zoneRefs = Array.isArray(zoneRefOrzoneRefs) ? zoneRefOrzoneRefs : [zoneRefOrzoneRefs];
-        const isEventTargetInZones = pipe(map((zoneRef) => zoneRef.current.contains(eventTarget)), any(identity))(zoneRefs);
+        const isEventTargetInZones = pipe(map((zoneRef) => zoneRef.current && eventTarget ? zoneRef.current.contains(eventTarget) : false), any(identity))(zoneRefs);
         if (isEventTargetInZones) {
             return;
         }
@@ -20959,7 +20959,7 @@ function requireDayjs_min () {
 }
 
 var dayjs_minExports = requireDayjs_min();
-var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
+var customDayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
 
 var timezoneExports = {};
 var timezone$1 = {
@@ -20995,28 +20995,65 @@ var fr = {
 	!function(e,n){module.exports=n(requireDayjs_min());}(commonjsGlobal,(function(e){function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=n(e),i={name:"fr",weekdays:"dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),weekdaysShort:"dim._lun._mar._mer._jeu._ven._sam.".split("_"),weekdaysMin:"di_lu_ma_me_je_ve_sa".split("_"),months:"janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),monthsShort:"janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),weekStart:1,yearStart:4,formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"DD/MM/YYYY",LL:"D MMMM YYYY",LLL:"D MMMM YYYY HH:mm",LLLL:"dddd D MMMM YYYY HH:mm"},relativeTime:{future:"dans %s",past:"il y a %s",s:"quelques secondes",m:"une minute",mm:"%d minutes",h:"une heure",hh:"%d heures",d:"un jour",dd:"%d jours",M:"un mois",MM:"%d mois",y:"un an",yy:"%d ans"},ordinal:function(e){return ""+e+(1===e?"er":"")}};return t.default.locale(i,null,!0),i}));
 } (fr));
 
-dayjs.extend(timezone);
-dayjs.extend(utc);
-dayjs.locale('fr');
-dayjs.tz.setDefault('UTC');
+customDayjs.extend(timezone);
+customDayjs.extend(utc);
+customDayjs.locale('fr');
 
-function getUtcDayjs() {
-    return dayjs().utc();
+/**
+ * Get a Dayjs instance of a UTC date treated as if it was a locally timezoned one.
+ *
+ * @example
+ * When run in Europe/Paris time zone while DST is not in application:
+ * ```ts
+ * getLocalizedDayjs(2022-01-02T03:04:05.006Z)`
+ * // => `2022-01-02T03:04:05.006+01:00`
+ * ```
+ *
+ * When run in Europe/Paris time zone while DST is in application:
+ * ```ts
+ * getLocalizedDayjs(2022-01-02T03:04:05.006Z)`
+ * // => `2022-01-02T03:04:05.006+02:00`
+ * ```
+ *
+ * When run in UTC time zone (there is no DST in UTC):
+ * ```ts
+ * getLocalizedDayjs(2022-01-02T03:04:05.006Z)`
+ * // => `2022-01-02T03:04:05.006Z`
+ * ```
+ */
+function getLocalizedDayjs(utcDate) {
+    const controlledUtcDate = typeof utcDate === 'string' ? new Date(utcDate) : utcDate;
+    // The number of minutes returned by getTimezoneOffset() is positive if the local time zone is behind UTC,
+    // and negative if the local time zone is ahead of UTC. For example, for UTC+10, `-600` will be returned.
+    //
+    // `Date.getTimezoneOffset()` includes the DST if it is in application during the period of the provided `utcDate`
+    // (i.e.: if the date is in winter and we're running locally in Europe/Paris time zone, `-120` will be returned;
+    // but if the date was in summer and we're running locally in Europe/Paris time zone, `-60` will be returned).
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset#varied_results_in_daylight_saving_time_dst_regions
+    const timezoneOffsetInMinutes = controlledUtcDate.getTimezoneOffset();
+    return customDayjs(utcDate).add(timezoneOffsetInMinutes, 'minutes');
 }
 
-// TODO Use `date-fns` instead of `dayjs`.
 /**
- * Get a Dayjs instance of a locally timezoned date treated as if it was a UTC one
+ * Get a Dayjs instance of a locally timezoned date treated as if it was a UTC one.
  *
  * @example
- * `2022-01-02T03:04:05.006+01:00` => `2022-01-02T03:04:05.006Z`.
+ * ```ts
+ * getUtcizedDayjs(2022-01-02T03:04:05.006+01:00)
+ * // => `2022-01-02T03:04:05.006Z
+ * ```
  */
 function getUtcizedDayjs(localDate) {
     const definedLocalDate = localDate || new Date();
     // The number of minutes returned by getTimezoneOffset() is positive if the local time zone is behind UTC,
-    // and negative if the local time zone is ahead of UTC. For example, for UTC+10, -600 will be returned.
+    // and negative if the local time zone is ahead of UTC. For example, for UTC+10, `-600` will be returned.
+    //
+    // `Date.getTimezoneOffset()` includes the DST if it is in application during the period of the provided `utcDate`
+    // (i.e.: if the date is in winter and we're running locally in Europe/Paris time zone, `-120` will be returned;
+    // but if the date was in summer and we're running locally in Europe/Paris time zone, `-60` will be returned).
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset#varied_results_in_daylight_saving_time_dst_regions
     const timezoneOffsetInMinutes = definedLocalDate.getTimezoneOffset();
-    return dayjs(definedLocalDate).subtract(timezoneOffsetInMinutes, 'minutes');
+    return customDayjs(definedLocalDate).utc().subtract(timezoneOffsetInMinutes, 'minutes');
 }
 
 new Array(24).fill(undefined).map((_, index) => ({
@@ -21047,14 +21084,56 @@ var STATUS;
     STATUS["START_DATE"] = "START_DATE";
 })(STATUS || (STATUS = {}));
 
-// TODO Use `date-fns` instead of `dayjs`.
 function formatNumberAsDoubleDigit(numberLike) {
     return String(numberLike).padStart(2, '0');
 }
-function getDateFromDateAndTimeTuple(dateTuple, timeTuple, isEnd = false) {
+/**
+ * @description
+ * This function will treat any date & time tuple in UTC, whichever the current time zone is.
+ *
+ * @example
+ * ```ts
+ * console.log(getDateFromDateAndTimeTuple(['2021', '31', '12'], ['00', '00']).toISOString())
+ * // => "2021-12-31T00:00:00.000Z"
+ * console.log(getDateFromDateAndTimeTuple(['2021', '31', '12'], ['23', '59'], true).toISOString())
+ * // => "2021-12-31T23:59:59.000Z"
+ * ```
+ */
+function getDayjsFromUtcDateAndTimeTuple(utcDateTuple, utcTimeTuple, isEnd = false) {
+    const [year, month, day] = utcDateTuple;
+    const [hour, minute] = utcTimeTuple;
+    const rawDateAsDayjs = customDayjs()
+        .utc()
+        .year(Number(year))
+        .month(Number(month) - 1)
+        .date(Number(day))
+        .hour(Number(hour))
+        .minute(Number(minute));
+    return isEnd
+        ? rawDateAsDayjs
+            .endOf('minute')
+            // TODO For some reason the API can't handle miliseconds in dates.
+            // That's why we set it to 0 (instead of 999)
+            .millisecond(0)
+        : rawDateAsDayjs.startOf('minute');
+}
+/**
+ * @description
+ * This function will treat any date & time tuple in UTC, whichever the current time zone is.
+ *
+ * @example
+ * ```ts
+ * console.log(getDateFromDateAndTimeTuple(['2021', '31', '12'], ['00', '00']).toISOString())
+ * // => "2021-12-31T00:00:00.000Z"
+ * console.log(getDateFromDateAndTimeTuple(['2021', '31', '12'], ['23', '59'], true).toISOString())
+ * // => "2021-12-31T23:59:59.000Z"
+ * ```
+ */
+function getUtcDateFromDateAndTimeTuple(dateTuple, timeTuple, isEnd = false) {
     const [year, month, day] = dateTuple;
     const [hour, minute] = timeTuple;
-    const rawDateAsDayjs = dayjs()
+    const rawDateAsDayjs = customDayjs()
+        .utc()
         .year(Number(year))
         .month(Number(month) - 1)
         .date(Number(day))
@@ -21069,14 +21148,14 @@ function getDateFromDateAndTimeTuple(dateTuple, timeTuple, isEnd = false) {
             .toDate()
         : rawDateAsDayjs.startOf('minute').toDate();
 }
-function getDateTupleFromDate(date) {
-    if (!date) {
+function getDateTupleFromUtcDate(utcDate) {
+    if (!utcDate) {
         return undefined;
     }
     return [
-        String(date.getFullYear()),
-        formatNumberAsDoubleDigit(date.getMonth() + 1),
-        formatNumberAsDoubleDigit(date.getDate())
+        String(utcDate.getFullYear()),
+        formatNumberAsDoubleDigit(utcDate.getMonth() + 1),
+        formatNumberAsDoubleDigit(utcDate.getDate())
     ];
 }
 /**
@@ -21108,11 +21187,23 @@ const getRangedTimeOptions = (minutesRange) => {
         };
     });
 };
-function getTimeTupleFromDate(date) {
-    if (!date) {
+function getTimeTupleFromUtcDate(utcDate) {
+    if (!utcDate) {
         return undefined;
     }
-    return [formatNumberAsDoubleDigit(date.getHours()), formatNumberAsDoubleDigit(date.getMinutes())];
+    return [formatNumberAsDoubleDigit(utcDate.getHours()), formatNumberAsDoubleDigit(utcDate.getMinutes())];
+}
+function getUtcDateTupleFromDayjs(dateAsDayjs) {
+    if (!dateAsDayjs) {
+        return undefined;
+    }
+    return [dateAsDayjs.utc().format('YYYY'), dateAsDayjs.utc().format('MM'), dateAsDayjs.utc().format('DD')];
+}
+function getUtcTimeTupleFromDayjs(dateAsDayjs) {
+    if (!dateAsDayjs) {
+        return undefined;
+    }
+    return [dateAsDayjs.utc().format('HH'), dateAsDayjs.utc().format('mm')];
 }
 // The type is not accurate here but it's good enough to use the protoypes we need for the feature
 // (they would work with any HTML element).
@@ -21123,25 +21214,26 @@ function isHtmlElement(element) {
     return Boolean(element.tagName);
 }
 
-function CalendarPicker({ defaultValue, isHistorical, isOpen, onChange }) {
+function CalendarPicker({ isHistorical, isOpen, onChange, value }) {
     const boxRef = useRef();
     const { forceUpdate } = useForceUpdate();
-    const utcTodayAsDayjs = useMemo(() => getUtcDayjs().endOf('day'), []);
+    const utcTodayAsDayjs = useMemo(() => customDayjs().utc().endOf('day'), []);
+    const controlledValue = useMemo(() => (value ? getLocalizedDayjs(value).toDate() : undefined), [value]);
     const disabledDate = useMemo(() => (date) => date && isHistorical ? getUtcizedDayjs(date).isAfter(utcTodayAsDayjs) : false, [isHistorical, utcTodayAsDayjs]);
-    const handleSelect = useCallback((nextDate) => {
-        const nextDateTuple = getDateTupleFromDate(nextDate);
-        onChange(nextDateTuple);
+    const handleSelect = useCallback((nextLocalDate) => {
+        // We utcize the date picked by the user
+        const nextUtcDateAsDayjs = getUtcizedDayjs(nextLocalDate);
+        const nextUtcDateTuple = getUtcDateTupleFromDayjs(nextUtcDateAsDayjs);
+        onChange(nextUtcDateTuple);
     }, [onChange]);
     useEffect(() => {
         // We wait for the <Box /> to render so that `boxRef` is defined
         // and can be used as a container for <RsuiteDatePicker />
         forceUpdate();
     }, [forceUpdate]);
-    return (jsx(Box$b, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DatePicker$1, { container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: isOpen, 
-            // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
-            ranges: [], 
+    return (jsx(Box$b, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DatePicker$1, { container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: isOpen, ranges: [], 
             // eslint-disable-next-line no-null/no-null
-            value: defaultValue ?? null })) }));
+            value: controlledValue ?? null })) }));
 }
 const Box$b = styled.div `
   height: 0;
@@ -21298,22 +21390,9 @@ const Box$b = styled.div `
   }
 `;
 
-// TODO Use `date-fns` instead of `dayjs`.
-/**
- * Get a Dayjs instance of a UTC date treated as if it was a locally timezoned one
- *
- * @example
- * `2022-01-02T03:04:05.006Z` => `2022-01-02T03:04:05.006+01:00` (or `+02:00` during DST) in Europe/Paris timezone.
- */
-function getLocalizedDayjs(utcDate) {
-    // The number of minutes returned by getTimezoneOffset() is positive if the local time zone is behind UTC,
-    // and negative if the local time zone is ahead of UTC. For example, for UTC+10, -600 will be returned.
-    const timezoneOffsetInMinutes = new Date().getTimezoneOffset();
-    return dayjs(utcDate).add(timezoneOffsetInMinutes, 'minutes');
-}
-
 function NumberInputWithRef({ defaultValue, isLight, max, min, onBack, onClick, onFilled, onFocus, onFormatError, onInput, onNext, onPrevious, size, ...nativeProps }, ref) {
-    const inputRef = useRef();
+    // eslint-disable-next-line no-null/no-null
+    const inputRef = useRef(null);
     const placeholder = useMemo(() => '-'.repeat(size), [size]);
     useImperativeHandle(ref, () => inputRef.current);
     const handleClick = useCallback((event) => {
@@ -21323,12 +21402,18 @@ function NumberInputWithRef({ defaultValue, isLight, max, min, onBack, onClick,
         }
     }, [onClick]);
     const handleFocus = useCallback((event) => {
+        if (!inputRef.current) {
+            return;
+        }
         inputRef.current.select();
         if (onFocus) {
             onFocus(event);
         }
     }, [onFocus]);
     const handleInput = useCallback(() => {
+        if (!inputRef.current) {
+            return;
+        }
         onFormatError(false);
         const { value } = inputRef.current;
         if (onInput) {
@@ -21347,6 +21432,9 @@ function NumberInputWithRef({ defaultValue, isLight, max, min, onBack, onClick,
         }
     }, [max, min, onFilled, onFormatError, onInput, size]);
     const handleKeyDown = useCallback((event) => {
+        if (!inputRef.current) {
+            return;
+        }
         if (onPrevious &&
             event.key === 'ArrowLeft' &&
             inputRef.current.selectionStart === 0 &&
@@ -21389,26 +21477,33 @@ const StyledNumberInput = styled.input `
   }
 `;
 
-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();
-    const yearInputRef = useRef();
+function DateInputWithRef({ baseContainer, defaultValue, disabled = false, isCompact, isEndDate = false, isForcedFocused, isLight, isRange = false, isStartDate = false, onBack, onChange, onClick, onInput, onNext, onPrevious }, ref) {
+    /* eslint-disable no-null/no-null */
+    const boxRef = useRef(null);
+    const dayInputRef = useRef(null);
+    const monthInputRef = useRef(null);
+    const yearInputRef = useRef(null);
+    /* eslint-enable no-null/no-null */
     const [hasFormatError, setHasFormatError] = useState(false);
     const [hasValidationError, setHasValidationError] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
     const baseDocument = useMemo(() => (isHtmlElement(baseContainer) ? baseContainer.ownerDocument : window.document), [baseContainer]);
     useImperativeHandle(ref, () => ({
         box: boxRef.current,
-        contains: boxRef.current.contains.bind(boxRef.current),
+        contains: boxRef.current ? boxRef.current.contains.bind(boxRef.current) : () => false,
         focus: (isInLastInputOfTheGroup = false) => {
             if (isInLastInputOfTheGroup) {
-                yearInputRef.current.focus();
+                yearInputRef.current?.focus();
             }
             else {
-                dayInputRef.current.focus();
+                dayInputRef.current?.focus();
             }
-        }
+        },
+        getValueAsPartialDateTuple: () => [
+            yearInputRef.current?.value.length ? yearInputRef.current.value : undefined,
+            monthInputRef.current?.value.length ? monthInputRef.current.value : undefined,
+            dayInputRef.current?.value.length ? dayInputRef.current.value : undefined
+        ]
     }));
     const handleBlur = useCallback(() => {
         setIsFocused(false);
@@ -21420,6 +21515,9 @@ function DateInputWithRef({ baseContainer, defaultValue, disabled = false, isCom
         setHasFormatError(hasNextFormatError);
     }, []);
     const submit = useCallback(() => {
+        if (!yearInputRef.current || !monthInputRef.current || !dayInputRef.current) {
+            return;
+        }
         setHasValidationError(false);
         const isFilled = baseDocument.activeElement === yearInputRef.current;
         switch (baseDocument.activeElement) {
@@ -21447,7 +21545,7 @@ function DateInputWithRef({ baseContainer, defaultValue, disabled = false, isCom
         ];
         onChange(nextDateTuple, isFilled);
     }, [baseDocument, onChange]);
-    return (jsxs(Box$a, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isForcedFocused || isFocused, "$isLight": isLight, children: [jsxs("div", { children: [isStartDate && jsx("span", { children: "Du " }), isEndDate && jsx("span", { children: "Au " }), jsx(NumberInput$1, { ref: dayInputRef, "aria-label": `Jour${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[2]), disabled: disabled, isLight: isLight, max: 31, min: 1, onBack: onBack, onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: () => monthInputRef.current.focus(), onPrevious: onPrevious, size: 2 }), "/", jsx(NumberInput$1, { ref: monthInputRef, "aria-label": `Mois${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[1]), disabled: disabled, isLight: isLight, max: 12, min: 1, onBack: () => dayInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: () => yearInputRef.current.focus(), onPrevious: () => dayInputRef.current.focus(), size: 2 }), "/", jsx(NumberInput$1, { ref: yearInputRef, "aria-label": `Année${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && defaultValue[0], disabled: disabled, isLight: isLight, max: 2030, min: 2020, onBack: () => monthInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => monthInputRef.current.focus(), size: 4 })] }), !isCompact && jsx(Calendar, {})] }));
+    return (jsxs(Box$a, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isForcedFocused || isFocused, "$isLight": isLight, children: [jsxs("div", { children: [isRange && isStartDate && jsx("span", { children: "Du " }), isRange && isEndDate && jsx("span", { children: "Au " }), jsx(NumberInput$1, { ref: dayInputRef, "aria-label": `Jour${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[2]), disabled: disabled, isLight: isLight, max: 31, min: 1, onBack: onBack, onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: () => monthInputRef.current?.focus(), onPrevious: onPrevious, size: 2 }), "/", jsx(NumberInput$1, { ref: monthInputRef, "aria-label": `Mois${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[1]), disabled: disabled, isLight: isLight, max: 12, min: 1, onBack: () => dayInputRef.current?.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: () => yearInputRef.current?.focus(), onPrevious: () => dayInputRef.current?.focus(), size: 2 }), "/", jsx(NumberInput$1, { ref: yearInputRef, "aria-label": `Année${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && defaultValue[0], disabled: disabled, isLight: isLight, max: 2030, min: 2020, onBack: () => monthInputRef.current?.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: onNext, onPrevious: () => monthInputRef.current?.focus(), size: 4 })] }), !isCompact && jsx(Calendar, {})] }));
 }
 const DateInput = forwardRef(DateInputWithRef);
 const Box$a = styled.div `
@@ -21573,33 +21671,37 @@ const Option = styled.div `
   }
 `;
 
-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();
+function TimeInputWithRef({ baseContainer, defaultValue, disabled = false, isCompact, isEndDate = false, isLight, isStartDate = false, minutesRange = 15, onBack, onChange, onFocus, onInput, onNext, onPrevious }, ref) {
+    /* eslint-disable no-null/no-null */
+    const boxRef = useRef(null);
+    const hourInputRef = useRef(null);
+    const minuteInputRef = useRef(null);
+    /* eslint-enable no-null/no-null */
     const [controlledDefaultValue, setControlledDefaultValue] = useState(defaultValue);
     const [hasFormatError, setHasFormatError] = useState(false);
     const [hasValidationError, setHasValidationError] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
+    const [isTimePickerOpen, setIsTimePickerOpen] = useState(false);
+    const [timePickerFilter, setTimePickerFilter] = useState(/.*/);
     const baseDocument = useMemo(() => (isHtmlElement(baseContainer) ? baseContainer.ownerDocument : window.document), [baseContainer]);
     useImperativeHandle(ref, () => ({
         box: boxRef.current,
         focus: (isInLastInputOfTheGroup = false) => {
             if (isInLastInputOfTheGroup) {
-                minuteInputRef.current.focus();
+                minuteInputRef.current?.focus();
             }
             else {
-                hourInputRef.current.focus();
+                hourInputRef.current?.focus();
             }
-        }
+        },
+        getValueAsPartialTimeTuple: () => [
+            hourInputRef.current?.value.length ? hourInputRef.current.value : undefined,
+            minuteInputRef.current?.value.length ? minuteInputRef.current.value : undefined
+        ]
     }));
-    const isRangedTimePickerOpenRef = useRef(false);
-    const [rangedTimePickerFilter, setRangedTimePickerFilter] = useState(/.*/);
-    const { forceUpdate } = useForceUpdate();
     const closeRangedTimePicker = useCallback(() => {
-        isRangedTimePickerOpenRef.current = false;
-        forceUpdate();
-    }, [forceUpdate]);
+        setIsTimePickerOpen(false);
+    }, []);
     const handleBack = useCallback(() => {
         if (!onBack) {
             return;
@@ -21619,21 +21721,24 @@ function TimeInputWithRef({ baseContainer, defaultValue, disabled = false, isCom
     const handleFormatError = useCallback((hasNextFormatError) => {
         setHasFormatError(hasNextFormatError);
     }, []);
-    const handleRangedTimePickedChange = useCallback((nextTimeTuple) => {
+    const handleHourInput = useCallback((nextValue) => {
+        // eslint-disable-next-line no-nested-ternary
+        const nextRangedTimePickerFilter = nextValue.length ? new RegExp(`^${nextValue}`) : /.*/;
+        setTimePickerFilter(nextRangedTimePickerFilter);
+        onInput();
+    }, [onInput]);
+    const handleTimePickerChange = useCallback((nextTimeTuple) => {
         closeRangedTimePicker();
         setControlledDefaultValue(nextTimeTuple);
         onChange(nextTimeTuple);
     }, [closeRangedTimePicker, onChange]);
-    const handleHourInput = useCallback((nextValue) => {
-        // eslint-disable-next-line no-nested-ternary
-        const nextRangedTimePickerFilter = nextValue.length ? new RegExp(`^${nextValue}`) : /.*/;
-        setRangedTimePickerFilter(nextRangedTimePickerFilter);
-    }, []);
     const openRangedTimePicker = useCallback(() => {
-        isRangedTimePickerOpenRef.current = true;
-        forceUpdate();
-    }, [forceUpdate]);
+        setIsTimePickerOpen(true);
+    }, []);
     const submit = useCallback(() => {
+        if (!hourInputRef.current || !minuteInputRef.current) {
+            return;
+        }
         setHasValidationError(false);
         if (baseDocument.activeElement === hourInputRef.current) {
             minuteInputRef.current.focus();
@@ -21649,7 +21754,7 @@ function TimeInputWithRef({ baseContainer, defaultValue, disabled = false, isCom
         onChange(nextTimeTuple);
     }, [baseDocument, closeRangedTimePicker, onChange]);
     useClickOutsideEffect(boxRef, closeRangedTimePicker, baseContainer);
-    return (jsxs(Box$8, { 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 }))] }));
+    return (jsxs(Box$8, { 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, onInput: onInput, onNext: onNext, onPrevious: () => hourInputRef.current?.focus(), size: 2 })] }), !isCompact && jsx(Clock, {})] }), isTimePickerOpen && (jsx(RangedTimePicker, { filter: timePickerFilter, minutesRange: minutesRange, onChange: handleTimePickerChange }))] }));
 }
 const TimeInput = forwardRef(TimeInputWithRef);
 const Box$8 = styled.div `
@@ -21685,27 +21790,30 @@ const InputGroup = styled.div `
   }
 `;
 
-function DatePicker({ baseContainer, className, 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();
+function DatePicker({ baseContainer, className, defaultValue, disabled = false, error, isCompact = false, isEndDate = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
+    /* eslint-disable no-null/no-null */
+    const boxRef = useRef(null);
+    const dateInputRef = useRef(null);
+    const timeInputRef = useRef(null);
+    /* eslint-enable no-null/no-null */
     const isCalendarPickerOpenRef = useRef(false);
-    const selectedLocalizedDateRef = useRef(defaultValue ? getLocalizedDayjs(defaultValue).toDate() : undefined);
-    const selectedLocalizedDateTupleRef = useRef(getDateTupleFromDate(selectedLocalizedDateRef.current));
-    const selectedLocalizedTimeTupleRef = useRef(getTimeTupleFromDate(selectedLocalizedDateRef.current));
+    const selectedUtcDateAsDayjsRef = useRef(defaultValue ? customDayjs(defaultValue) : undefined);
+    const selectedUtcDateTupleRef = useRef(getUtcDateTupleFromDayjs(selectedUtcDateAsDayjsRef.current));
+    const selectedUtcTimeTupleRef = useRef(getUtcTimeTupleFromDayjs(selectedUtcDateAsDayjsRef.current));
     const { forceUpdate } = useForceUpdate();
     const controlledError = useMemo(() => normalizeString(error), [error]);
+    const defaultTimeTuple = useMemo(() => (isEndDate ? ['23', '59'] : ['00', '00']), [isEndDate]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const rangeCalendarPickerDefaultValue = useMemo(() => selectedLocalizedDateTupleRef.current
-        ? getDateFromDateAndTimeTuple(selectedLocalizedDateTupleRef.current, ['00', '00'])
+    const calendarPickerDefaultValue = useMemo(() => selectedUtcDateTupleRef.current
+        ? getUtcDateFromDateAndTimeTuple(selectedUtcDateTupleRef.current, defaultTimeTuple)
         : undefined, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectedLocalizedDateTupleRef.current]);
+    [selectedUtcDateTupleRef.current]);
     const submit = useCallback(() => {
-        if (!onChange || !selectedLocalizedDateRef.current) {
+        if (!onChange || !selectedUtcDateAsDayjsRef.current) {
             return;
         }
-        const nextDateAsDayjs = getUtcizedDayjs(selectedLocalizedDateRef.current);
+        const nextDateAsDayjs = selectedUtcDateAsDayjsRef.current;
         if (isStringDate) {
             onChange(nextDateAsDayjs.toISOString());
         }
@@ -21718,61 +21826,82 @@ function DatePicker({ baseContainer, className, defaultValue, disabled = false,
         forceUpdate();
     }, [forceUpdate]);
     const handleDateInputNext = useCallback(() => {
-        if (!withTime) {
+        if (!withTime || !timeInputRef.current) {
             return;
         }
         timeInputRef.current.focus();
     }, [withTime]);
-    const handleDateInputChange = useCallback((nextDateTuple, isFilled) => {
-        selectedLocalizedDateTupleRef.current = nextDateTuple;
+    const handleDateInputChange = useCallback((nextUtcDateTuple, isFilled) => {
+        selectedUtcDateTupleRef.current = nextUtcDateTuple;
         // If there is no time input or a time has already been selected,
-        if (!withTime || selectedLocalizedTimeTupleRef.current) {
+        if (!withTime || selectedUtcTimeTupleRef.current) {
             // we must update the selected date and call onChange()
-            const timeTuple = (withTime ? selectedLocalizedTimeTupleRef.current : ['00', '00']);
-            const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, timeTuple);
-            selectedLocalizedDateRef.current = getLocalizedDayjs(nextDate).toDate();
+            const timeTuple = withTime && selectedUtcTimeTupleRef.current ? selectedUtcTimeTupleRef.current : defaultTimeTuple;
+            selectedUtcDateAsDayjsRef.current = getDayjsFromUtcDateAndTimeTuple(nextUtcDateTuple, timeTuple, isEndDate);
             submit();
         }
         if (isFilled) {
             handleDateInputNext();
         }
-    }, [handleDateInputNext, submit, withTime]);
-    const handleCalendarPickerChange = useCallback((nextDateTuple) => {
+    }, [defaultTimeTuple, handleDateInputNext, isEndDate, submit, withTime]);
+    const handleCalendarPickerChange = useCallback((nextUtcizedDateTuple) => {
         // If this is a date picker without a time input,
         if (!withTime) {
-            // we have to fix the date at the beginning of the day
-            const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, ['00', '00']);
-            selectedLocalizedDateRef.current = nextDate;
+            selectedUtcDateAsDayjsRef.current = getDayjsFromUtcDateAndTimeTuple(nextUtcizedDateTuple, 
+            // we set the time to the start (or end) of the day
+            defaultTimeTuple, isEndDate);
         }
         // If this is a date picker with a time input,
         else {
-            // we include the selected time if it exists, set it at the beginning of the day if not
-            const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, selectedLocalizedTimeTupleRef.current || ['00', '00']);
-            selectedLocalizedDateRef.current = nextDate;
+            selectedUtcDateAsDayjsRef.current = getDayjsFromUtcDateAndTimeTuple(nextUtcizedDateTuple, 
+            // we include the selected time if it exists, or set it to the start (or end) of the day if it doesn't
+            selectedUtcTimeTupleRef.current || defaultTimeTuple, isEndDate);
         }
-        selectedLocalizedDateTupleRef.current = nextDateTuple;
-        selectedLocalizedTimeTupleRef.current = getTimeTupleFromDate(selectedLocalizedDateRef.current);
+        selectedUtcDateTupleRef.current = nextUtcizedDateTuple;
+        selectedUtcTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedUtcDateAsDayjsRef.current);
         closeCalendarPicker();
         forceUpdate();
         submit();
-        if (withTime && !selectedLocalizedTimeTupleRef.current) {
+        if (withTime && !selectedUtcTimeTupleRef.current && timeInputRef.current) {
             timeInputRef.current.focus();
         }
-    }, [closeCalendarPicker, forceUpdate, submit, withTime]);
+    }, [closeCalendarPicker, defaultTimeTuple, forceUpdate, isEndDate, submit, withTime]);
     const handleDisable = useCallback(() => {
-        selectedLocalizedDateTupleRef.current = undefined;
-        selectedLocalizedTimeTupleRef.current = undefined;
+        selectedUtcDateTupleRef.current = undefined;
+        selectedUtcTimeTupleRef.current = undefined;
         forceUpdate();
     }, [forceUpdate]);
+    /**
+     * @description
+     * This function is used to detect a user clearing all the date/time-related inputs
+     * in order to call `onChange(undefined)` when everything is cleared
+     */
+    const handleDateOrTimeInputInput = useCallback(() => {
+        if (!dateInputRef.current || !onChange) {
+            return;
+        }
+        const [year, month, day] = dateInputRef.current.getValueAsPartialDateTuple();
+        if (!withTime && !year && !month && !day) {
+            onChange(undefined);
+            return;
+        }
+        if (!timeInputRef.current) {
+            return;
+        }
+        const [hour, minute] = timeInputRef.current.getValueAsPartialTimeTuple();
+        if (!year && !month && !day && !hour && !minute) {
+            onChange(undefined);
+        }
+    }, [onChange, withTime]);
     const handleTimeInputFilled = useCallback((nextTimeTuple) => {
         // If a date has already been selected
-        if (selectedLocalizedDateTupleRef.current) {
+        if (selectedUtcDateTupleRef.current) {
             // we must update the selected date accordingly and submit it
-            const nextDate = getDateFromDateAndTimeTuple(selectedLocalizedDateTupleRef.current, nextTimeTuple);
-            selectedLocalizedDateRef.current = nextDate;
+            const nextDateAsDayjs = getDayjsFromUtcDateAndTimeTuple(selectedUtcDateTupleRef.current, nextTimeTuple);
+            selectedUtcDateAsDayjsRef.current = nextDateAsDayjs;
             submit();
         }
-        selectedLocalizedTimeTupleRef.current = nextTimeTuple;
+        selectedUtcTimeTupleRef.current = nextTimeTuple;
         submit();
     }, [submit]);
     const openCalendarPicker = useCallback(() => {
@@ -21781,7 +21910,7 @@ function DatePicker({ baseContainer, className, defaultValue, disabled = false,
     }, [forceUpdate]);
     useFieldUndefineEffect(disabled, onChange, handleDisable);
     useClickOutsideEffect(boxRef, closeCalendarPicker, baseContainer);
-    return (jsxs(Fieldset, { className: classNames('Field-DatePicker', className), disabled: disabled, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$7, { ref: boxRef, children: [jsx(Field$1, { children: jsx(DateInput, { ref: dateInputRef, baseContainer: baseContainer || undefined, 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 || undefined, 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, { className: classNames('Field-DatePicker', className), disabled: disabled, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$7, { ref: boxRef, children: [jsx(Field$1, { children: jsx(DateInput, { ref: dateInputRef, baseContainer: baseContainer || undefined, defaultValue: selectedUtcDateTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: isEndDate, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputChange, onClick: openCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleDateInputNext }) }), withTime && (jsx(Field$1, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, baseContainer: baseContainer || undefined, defaultValue: selectedUtcTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current?.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onInput: handleDateOrTimeInputInput, onPrevious: () => dateInputRef.current?.focus(true) }, JSON.stringify(selectedUtcTimeTupleRef.current)) }))] }), hasError && jsx(FieldError, { children: controlledError }), jsx(CalendarPicker, { isHistorical: isHistorical, isOpen: isCalendarPickerOpenRef.current, onChange: handleCalendarPickerChange, value: calendarPickerDefaultValue })] }));
 }
 const Box$7 = styled.div `
   * {
@@ -21802,30 +21931,35 @@ function sortDates(dates) {
     return dates
         .map(date => date.toISOString())
         .sort()
-        .map(dateAsIsoString => dayjs(dateAsIsoString).toDate());
+        .map(dateAsIsoString => customDayjs(dateAsIsoString).toDate());
 }
 
 function RangeCalendarPicker({ defaultValue, isHistorical, isOpen, onChange }) {
     const boxRef = useRef();
-    const selectedFirstDate = useRef();
-    const selectedSecondDate = useRef();
+    // It's called "first" and "second" because the calendar can also be picked from right to left,
+    // that's why we sort these first and second dates before calling `onChange()`
+    // in order to distinguish the start date from the end date
+    const selectedFirstUtcDate = useRef();
+    const selectedSecondUtcDate = useRef();
     const { forceUpdate } = useForceUpdate();
     const controlledValue = useMemo(() => (defaultValue ? sortDates(defaultValue) : undefined), [defaultValue]);
-    const utcTodayAsDayjs = useMemo(() => getUtcDayjs().endOf('day'), []);
+    const utcTodayAsDayjs = useMemo(() => customDayjs().utc().endOf('day'), []);
     const disabledDate = useMemo(() => (date) => isHistorical ? getUtcizedDayjs(date).isAfter(utcTodayAsDayjs) : false, [isHistorical, utcTodayAsDayjs]);
-    const handleSelect = useCallback((nextDate) => {
-        if (!selectedFirstDate.current || selectedSecondDate.current) {
-            selectedFirstDate.current = nextDate;
-            selectedSecondDate.current = undefined;
+    const handleSelect = useCallback((nextLocalDate) => {
+        // We utcize the date picked by the user
+        const nextUtcDate = getUtcizedDayjs(nextLocalDate).toDate();
+        if (!selectedFirstUtcDate.current || selectedSecondUtcDate.current) {
+            selectedFirstUtcDate.current = nextUtcDate;
+            selectedSecondUtcDate.current = undefined;
             return;
         }
-        const sortedDateRange = sortDates([selectedFirstDate.current, nextDate]);
+        const sortedDateRange = sortDates([selectedFirstUtcDate.current, nextUtcDate]);
         const [startDate, endDate] = sortedDateRange;
-        const startDateTuple = getDateTupleFromDate(startDate);
-        const endDateTuple = getDateTupleFromDate(endDate);
-        const nextDateTupleRange = [startDateTuple, endDateTuple];
-        selectedSecondDate.current = nextDate;
-        onChange(nextDateTupleRange);
+        const startDateTuple = getDateTupleFromUtcDate(startDate);
+        const endDateTuple = getDateTupleFromUtcDate(endDate);
+        const nextUtcDateTupleRange = [startDateTuple, endDateTuple];
+        selectedSecondUtcDate.current = nextUtcDate;
+        onChange(nextUtcDateTupleRange);
     }, [onChange]);
     useEffect(() => {
         // We wait for the <Box /> to render so that `boxRef` is defined
@@ -22007,41 +22141,43 @@ var DateRangePosition;
 })(DateRangePosition || (DateRangePosition = {}));
 
 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();
-    const endTimeInputRef = useRef();
+    /* eslint-disable no-null/no-null */
+    const startDateInputRef = useRef(null);
+    const startTimeInputRef = useRef(null);
+    const endDateInputRef = useRef(null);
+    const endTimeInputRef = useRef(null);
+    /* eslint-enable no-null/no-null */
     const isRangeCalendarPickerOpenRef = useRef(false);
-    const selectedLocalizedStartDateRef = useRef(defaultValue ? getLocalizedDayjs(defaultValue[0]).toDate() : undefined);
-    const selectedLocalizedEndDateRef = useRef(defaultValue ? getLocalizedDayjs(defaultValue[1]).toDate() : undefined);
-    const selectedLocalizedStartDateTupleRef = useRef(getDateTupleFromDate(selectedLocalizedStartDateRef.current));
-    const selectedLocalizedEndDateTupleRef = useRef(getDateTupleFromDate(selectedLocalizedEndDateRef.current));
-    const selectedLocalizedStartTimeTupleRef = useRef(getTimeTupleFromDate(selectedLocalizedStartDateRef.current));
-    const selectedLocalizedEndTimeTupleRef = useRef(getTimeTupleFromDate(selectedLocalizedEndDateRef.current));
+    const selectedStartUtcDateRef = useRef(defaultValue ? customDayjs(defaultValue[0]).toDate() : undefined);
+    const selectedEndUtcDateRef = useRef(defaultValue ? customDayjs(defaultValue[1]).toDate() : undefined);
+    const selectedStartDateTupleRef = useRef(getDateTupleFromUtcDate(selectedStartUtcDateRef.current));
+    const selectedEndDateTupleRef = useRef(getDateTupleFromUtcDate(selectedEndUtcDateRef.current));
+    const selectedStartTimeTupleRef = useRef(getTimeTupleFromUtcDate(selectedStartUtcDateRef.current));
+    const selectedEndTimeTupleRef = useRef(getTimeTupleFromUtcDate(selectedEndUtcDateRef.current));
     const { forceUpdate } = useForceUpdate();
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const rangeCalendarPickerDefaultValue = useMemo(() => selectedLocalizedStartDateTupleRef.current && selectedLocalizedEndDateTupleRef.current
+    const rangeCalendarPickerDefaultValue = useMemo(() => selectedStartDateTupleRef.current && selectedEndDateTupleRef.current
         ? [
-            getDateFromDateAndTimeTuple(selectedLocalizedStartDateTupleRef.current, ['00', '00']),
-            getDateFromDateAndTimeTuple(selectedLocalizedEndDateTupleRef.current, ['00', '00'], true)
+            getUtcDateFromDateAndTimeTuple(selectedStartDateTupleRef.current, ['00', '00']),
+            getUtcDateFromDateAndTimeTuple(selectedEndDateTupleRef.current, ['00', '00'], true)
         ]
         : undefined, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectedLocalizedEndDateTupleRef.current, selectedLocalizedStartDateTupleRef.current]);
+    [selectedEndDateTupleRef.current, selectedStartDateTupleRef.current]);
     const submit = useCallback(() => {
-        if (!onChange || !selectedLocalizedStartDateRef.current || !selectedLocalizedEndDateRef.current) {
+        if (!onChange || !selectedStartUtcDateRef.current || !selectedEndUtcDateRef.current) {
             return;
         }
         if (isStringDate) {
-            const utcizedStartDateAsString = getUtcizedDayjs(selectedLocalizedStartDateRef.current).toISOString();
-            const utcizedEndDateAsString = getUtcizedDayjs(selectedLocalizedEndDateRef.current).toISOString();
+            const utcizedStartDateAsString = selectedStartUtcDateRef.current.toISOString();
+            const utcizedEndDateAsString = selectedEndUtcDateRef.current.toISOString();
             const nextDateAsStringRange = [utcizedStartDateAsString, utcizedEndDateAsString];
             onChange(nextDateAsStringRange);
         }
         else {
-            const utcizedStartDate = getUtcizedDayjs(selectedLocalizedStartDateRef.current).toDate();
-            const utcizedEndDate = getUtcizedDayjs(selectedLocalizedEndDateRef.current).toDate();
+            const utcizedStartDate = selectedStartUtcDateRef.current;
+            const utcizedEndDate = selectedEndUtcDateRef.current;
             const nextDateRange = [utcizedStartDate, utcizedEndDate];
             onChange(nextDateRange);
         }
@@ -22051,27 +22187,33 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
         forceUpdate();
     }, [forceUpdate]);
     const handleDisable = useCallback(() => {
-        selectedLocalizedStartDateTupleRef.current = undefined;
-        selectedLocalizedStartTimeTupleRef.current = undefined;
-        selectedLocalizedEndDateTupleRef.current = undefined;
-        selectedLocalizedEndTimeTupleRef.current = undefined;
+        selectedStartDateTupleRef.current = undefined;
+        selectedStartTimeTupleRef.current = undefined;
+        selectedEndDateTupleRef.current = undefined;
+        selectedEndTimeTupleRef.current = undefined;
         forceUpdate();
     }, [forceUpdate]);
     const handleEndDateInputNext = useCallback(() => {
-        if (!withTime) {
+        if (!withTime || !endTimeInputRef.current) {
             return;
         }
         endTimeInputRef.current.focus();
     }, [withTime]);
     const handleEndDateInputPrevious = useCallback(() => {
-        if (withTime) {
+        if (!startDateInputRef.current) {
+            return;
+        }
+        if (withTime && startTimeInputRef.current) {
             startTimeInputRef.current.focus(true);
             return;
         }
         startDateInputRef.current.focus(true);
     }, [withTime]);
     const handleStartDateInputNext = useCallback(() => {
-        if (withTime) {
+        if (!endDateInputRef.current) {
+            return;
+        }
+        if (withTime && startTimeInputRef.current) {
             startTimeInputRef.current.focus();
             return;
         }
@@ -22079,13 +22221,13 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
     }, [withTime]);
     const handleDateInputChange = useCallback((position, nextDateTuple, isFilled) => {
         if (position === DateRangePosition.START) {
-            selectedLocalizedStartDateTupleRef.current = nextDateTuple;
+            selectedStartDateTupleRef.current = nextDateTuple;
             // If there is no time input or a start time has already been selected,
-            if (!withTime || selectedLocalizedStartTimeTupleRef.current) {
+            if (!withTime || selectedStartTimeTupleRef.current) {
                 // we must update the selected start date and call onChange()
-                const startTimeTuple = (withTime ? selectedLocalizedStartTimeTupleRef.current : ['00', '00']);
-                const nextStartDate = getDateFromDateAndTimeTuple(nextDateTuple, startTimeTuple);
-                selectedLocalizedStartDateRef.current = nextStartDate;
+                const startUtcTimeTuple = withTime && selectedStartTimeTupleRef.current ? selectedStartTimeTupleRef.current : ['00', '00'];
+                const nextStartDate = getUtcDateFromDateAndTimeTuple(nextDateTuple, startUtcTimeTuple);
+                selectedStartUtcDateRef.current = nextStartDate;
                 submit();
             }
             if (isFilled) {
@@ -22093,13 +22235,13 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
             }
         }
         else {
-            selectedLocalizedEndDateTupleRef.current = nextDateTuple;
+            selectedEndDateTupleRef.current = nextDateTuple;
             // If there is no time input or an end time has already been selected,
-            if (!withTime || selectedLocalizedEndTimeTupleRef.current) {
+            if (!withTime || selectedEndTimeTupleRef.current) {
                 // we must update the selected end date and call onChange()
-                const endTimeTuple = (withTime ? selectedLocalizedEndTimeTupleRef.current : ['23', '59']);
-                const nextEndDate = getDateFromDateAndTimeTuple(nextDateTuple, endTimeTuple, true);
-                selectedLocalizedEndDateRef.current = nextEndDate;
+                const endTimeTuple = (withTime ? selectedEndTimeTupleRef.current : ['23', '59']);
+                const nextEndDate = getUtcDateFromDateAndTimeTuple(nextDateTuple, endTimeTuple, true);
+                selectedEndUtcDateRef.current = nextEndDate;
                 submit();
             }
             if (isFilled) {
@@ -22107,54 +22249,86 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
             }
         }
     }, [handleEndDateInputNext, handleStartDateInputNext, submit, withTime]);
-    const handleRangeCalendarPickerChange = useCallback((nextDateTupleRange) => {
-        const [nextStartDateTuple, nextEndDateTuple] = nextDateTupleRange;
+    /**
+     * @description
+     * This function is used to detect a user clearing all the date/time-related inputs
+     * in order to call `onChange(undefined)` when everything is cleared
+     */
+    const handleDateOrTimeInputInput = useCallback(() => {
+        if (!startDateInputRef.current || !endDateInputRef.current || !onChange) {
+            return;
+        }
+        const [startYear, startMonth, startDay] = startDateInputRef.current.getValueAsPartialDateTuple();
+        const [endYear, endMonth, endDay] = endDateInputRef.current.getValueAsPartialDateTuple();
+        if (!withTime && !startYear && !startMonth && !startDay && !endYear && !endMonth && !endDay) {
+            onChange(undefined);
+            return;
+        }
+        if (!startTimeInputRef.current || !endTimeInputRef.current) {
+            return;
+        }
+        const [startHour, startMinute] = startTimeInputRef.current.getValueAsPartialTimeTuple();
+        const [endHour, endMinute] = endTimeInputRef.current.getValueAsPartialTimeTuple();
+        if (!startYear &&
+            !startMonth &&
+            !startDay &&
+            !startHour &&
+            !startMinute &&
+            !endYear &&
+            !endMonth &&
+            !endDay &&
+            !endHour &&
+            !endMinute) {
+            onChange(undefined);
+        }
+    }, [onChange, withTime]);
+    const handleRangeCalendarPickerChange = useCallback((nextUtcDateTupleRange) => {
+        const [nextStartUtcDateTuple, nextEndUtcDateTuple] = nextUtcDateTupleRange;
         // If this is a date picker without a time input,
         if (!withTime) {
             // we have to fix the start date at the beginning of the day
-            const nextStartDate = getDateFromDateAndTimeTuple(nextStartDateTuple, ['00', '00']);
+            selectedStartUtcDateRef.current = getUtcDateFromDateAndTimeTuple(nextStartUtcDateTuple, ['00', '00']);
             // and the end date at the end of the day
-            const nextEndDate = getDateFromDateAndTimeTuple(nextEndDateTuple, ['23', '59'], true);
-            selectedLocalizedStartDateRef.current = nextStartDate;
-            selectedLocalizedEndDateRef.current = nextEndDate;
+            selectedEndUtcDateRef.current = getUtcDateFromDateAndTimeTuple(nextEndUtcDateTuple, ['23', '59'], true);
         }
         // If this is a date picker with a time input,
         else {
             // we include the selected start time if it exists, set it at the beginning of the day if not
-            const nextStartDate = getDateFromDateAndTimeTuple(nextStartDateTuple, selectedLocalizedStartTimeTupleRef.current || ['00', '00']);
-            selectedLocalizedStartDateRef.current = nextStartDate;
+            selectedStartUtcDateRef.current = getUtcDateFromDateAndTimeTuple(nextStartUtcDateTuple, selectedStartTimeTupleRef.current || ['00', '00']);
             // we include the selected end time if it exists, set it at the end of the day if not
-            const nextEndDate = getDateFromDateAndTimeTuple(nextEndDateTuple, selectedLocalizedEndTimeTupleRef.current || ['23', '59'], true);
-            selectedLocalizedEndDateRef.current = nextEndDate;
+            selectedEndUtcDateRef.current = getUtcDateFromDateAndTimeTuple(nextEndUtcDateTuple, selectedEndTimeTupleRef.current || ['23', '59'], true);
         }
-        selectedLocalizedStartDateTupleRef.current = nextStartDateTuple;
-        selectedLocalizedStartTimeTupleRef.current = getTimeTupleFromDate(selectedLocalizedStartDateRef.current);
-        selectedLocalizedEndDateTupleRef.current = nextEndDateTuple;
-        selectedLocalizedEndTimeTupleRef.current = getTimeTupleFromDate(selectedLocalizedEndDateRef.current);
+        selectedStartDateTupleRef.current = nextStartUtcDateTuple;
+        selectedStartTimeTupleRef.current = getTimeTupleFromUtcDate(selectedStartUtcDateRef.current);
+        selectedEndDateTupleRef.current = nextEndUtcDateTuple;
+        selectedEndTimeTupleRef.current = getTimeTupleFromUtcDate(selectedEndUtcDateRef.current);
         closeRangeCalendarPicker();
         submit();
     }, [closeRangeCalendarPicker, submit, withTime]);
     const handleTimeInputFilled = useCallback((position, nextTimeTuple) => {
+        if (!endDateInputRef.current) {
+            return;
+        }
         if (position === DateRangePosition.START) {
             // If a start date has already been selected
-            if (selectedLocalizedStartDateTupleRef.current) {
+            if (selectedStartDateTupleRef.current) {
                 // we must update the selected start date accordingly and submit it
-                const nextStartDate = getDateFromDateAndTimeTuple(selectedLocalizedStartDateTupleRef.current, nextTimeTuple);
-                selectedLocalizedStartDateRef.current = nextStartDate;
+                const nextStartDate = getUtcDateFromDateAndTimeTuple(selectedStartDateTupleRef.current, nextTimeTuple);
+                selectedStartUtcDateRef.current = nextStartDate;
                 submit();
             }
-            selectedLocalizedStartTimeTupleRef.current = nextTimeTuple;
+            selectedStartTimeTupleRef.current = nextTimeTuple;
             endDateInputRef.current.focus();
         }
         else {
             // If an end date has already been selected
-            if (selectedLocalizedEndDateTupleRef.current) {
+            if (selectedEndDateTupleRef.current) {
                 // we must update the selected end date accordingly and submit it
-                const nextEndDate = getDateFromDateAndTimeTuple(selectedLocalizedEndDateTupleRef.current, nextTimeTuple, true);
-                selectedLocalizedEndDateRef.current = nextEndDate;
+                const nextEndDate = getUtcDateFromDateAndTimeTuple(selectedEndDateTupleRef.current, nextTimeTuple, true);
+                selectedEndUtcDateRef.current = nextEndDate;
                 submit();
             }
-            selectedLocalizedEndTimeTupleRef.current = nextTimeTuple;
+            selectedEndTimeTupleRef.current = nextTimeTuple;
         }
         submit();
     }, [submit]);
@@ -22164,7 +22338,7 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
     }, [forceUpdate]);
     useFieldUndefineEffect(disabled, onChange, handleDisable);
     useClickOutsideEffect([endDateInputRef, startDateInputRef], closeRangeCalendarPicker, baseContainer);
-    return (jsxs(Fieldset, { className: "Field-DateRangePicker", disabled: disabled, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$5, { isDisabled: disabled, children: [jsx(Field, { children: jsx(DateInput, { ref: startDateInputRef, baseContainer: baseContainer || undefined, 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 || undefined, 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, baseContainer: baseContainer || undefined, 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 || undefined, 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, { className: "Field-DateRangePicker", disabled: disabled, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$5, { isDisabled: disabled, children: [jsx(Field, { children: jsx(DateInput, { ref: startDateInputRef, baseContainer: baseContainer || undefined, defaultValue: selectedStartDateTupleRef.current, disabled: disabled, isCompact: isCompact, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isRange: true, isStartDate: true, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.START, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleStartDateInputNext }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, baseContainer: baseContainer || undefined, defaultValue: selectedStartTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isLight: isLight, isStartDate: true, minutesRange: minutesRange, onBack: () => startDateInputRef.current?.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.START, nextTimeTuple), onFocus: closeRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: () => endDateInputRef.current?.focus(), onPrevious: () => startDateInputRef.current?.focus(true) }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, baseContainer: baseContainer || undefined, defaultValue: selectedEndDateTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isRange: true, onBack: handleEndDateInputPrevious, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.END, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, baseContainer: baseContainer || undefined, defaultValue: selectedEndTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: true, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current?.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onPrevious: () => endDateInputRef.current?.focus(true) }) }))] }), hasError && jsx(FieldError, { children: controlledError }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
 }
 const Box$5 = styled.div `
   * {
@@ -22518,7 +22692,7 @@ const CheckboxesBox = styled.div `
     `}
 `;
 
-function MultiZoneEditor({ addButtonLabel, defaultValue = [], disabled = false, error, initialZone, isLabelHidden = false, isLight = false, label, labelPropName, onAdd, onCenter, onChange, onDelete, onEdit }) {
+function MultiZoneEditor({ addButtonLabel, defaultValue = [], disabled = false, error, initialZone, isAddButtonDisabled = false, 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]);
@@ -22557,7 +22731,7 @@ function MultiZoneEditor({ addButtonLabel, defaultValue = [], disabled = false,
         setZones(defaultValue);
     }, [defaultValue]);
     useFieldUndefineEffect(disabled, onChange, handleDisable);
-    return (jsxs(Fieldset, { className: "Field-MultiZoneEditor", disabled: disabled, isLegendHidden: isLabelHidden, 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) => (
+    return (jsxs(Fieldset, { className: "Field-MultiZoneEditor", disabled: disabled, isLegendHidden: isLabelHidden, legend: label, children: [jsx(Button, { accent: Accent.SECONDARY, disabled: disabled || isAddButtonDisabled, 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(ZoneBox, { "$isLight": isLight, 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 })] }));
 }
@@ -33057,5 +33231,5 @@ function FormikTextInput({ name, ...originalProps }) {
     return jsx(TextInput, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
-export { Accent, Button, Checkbox, CoordinatesFormat, CoordinatesInput, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SingleTag, Size, THEME, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, dayjs, getCoordinates, getLocalizedDayjs, getPseudoRandomString, getUtcizedDayjs, isNumeric, noop, stopMouseEventPropagation, useClickOutsideEffect, useForceUpdate, useKey, usePrevious };
+export { Accent, Button, Checkbox, CoordinatesFormat, CoordinatesInput, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SingleTag, Size, THEME, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getPseudoRandomString, getUtcizedDayjs, isNumeric, noop, stopMouseEventPropagation, useClickOutsideEffect, useForceUpdate, useKey, usePrevious };
 //# sourceMappingURL=index.js.map