@mtes-mct/monitor-ui 7.6.0 → 7.6.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [7.6.0](https://github.com/MTES-MCT/monitor-ui/compare/v7.5.0...v7.6.0) (2023-07-05)
+
+
+### Features
+
+* **theme:** add amp colors ([46cf039](https://github.com/MTES-MCT/monitor-ui/commit/46cf039a94a403ff9522a521c423a1488d652337))
+* **theme:** add story for colors + yarncache ([b848553](https://github.com/MTES-MCT/monitor-ui/commit/b84855336c0dd5c6cc988e1c3a81a82d0f32de55))
+
 # [7.5.0](https://github.com/MTES-MCT/monitor-ui/compare/v7.4.3...v7.5.0) (2023-06-29)
 
 

package/cypress.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: Cypress.ConfigOptions<any>;
+export default _default;

package/index.js

@@ -21538,6 +21538,15 @@ function NumberInputWithRef({ isLight, max, min, onBack, onBlur, onFilled, onFoc
         }
     }, [max, min, onFilled, onFormatError, onInput, size]);
     const handleKeyDown = useCallback((event) => {
+        if (!inputRef.current) {
+            return;
+        }
+        if (onBack && event.key === 'Backspace' && !inputRef.current.value.length) {
+            event.preventDefault();
+            onBack();
+        }
+    }, [onBack]);
+    const handleKeyUp = useCallback((event) => {
         if (!inputRef.current) {
             return;
         }
@@ -21559,12 +21568,17 @@ function NumberInputWithRef({ isLight, max, min, onBack, onBlur, onFilled, onFoc
             onNext();
             return;
         }
-        if (onBack && event.key === 'Backspace' && !inputRef.current.value.length) {
+        // TODO Find a better solution that this dirty hack handling "onRefilled" case.
+        if (onNext &&
+            inputRef.current.value.length === size &&
+            inputRef.current.selectionStart === inputRef.current.value.length &&
+            // We don't want to call that function when the user is selecting the input text
+            inputRef.current.selectionEnd === inputRef.current.selectionStart) {
             event.preventDefault();
-            onBack();
+            onNext();
         }
-    }, [onBack, onNext, onPrevious]);
-    return (jsx(StyledNumberInput, { ref: inputRef, "$isLight": isLight, "$size": size, defaultValue: value, maxLength: size, onBlur: handleBlur, onFocus: handleFocus, onInput: handleInput, onKeyDown: handleKeyDown, pattern: "\\d*", placeholder: placeholder, type: "text", ...nativeProps }, String(value)));
+    }, [onNext, onPrevious, size]);
+    return (jsx(StyledNumberInput, { ref: inputRef, "$isLight": isLight, "$size": size, defaultValue: value, maxLength: size, onBlur: handleBlur, onFocus: handleFocus, onInput: handleInput, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, pattern: "\\d*", placeholder: placeholder, type: "text", ...nativeProps }, String(value)));
 }
 const NumberInput$1 = forwardRef(NumberInputWithRef);
 const StyledNumberInput = styled.input `
@@ -21601,6 +21615,7 @@ function DateInputWithRef({ baseContainer, disabled = false, isCompact, isEndDat
         }
         return lastValueBeforeFocusRef.current;
     }, [isFocused, value]);
+    const key = JSON.stringify(lastValueBeforeFocusRef.current);
     useImperativeHandle(ref, () => ({
         box: boxRef.current,
         contains: boxRef.current ? boxRef.current.contains.bind(boxRef.current) : () => false,
@@ -21658,7 +21673,7 @@ function DateInputWithRef({ baseContainer, disabled = false, isCompact, isEndDat
         ];
         onChange(nextDateTuple, isFilled);
     }, [baseDocument, onChange]);
-    return (jsxs(Box$b, { 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' : ''}`, 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, value: controlledValue && controlledValue[2] }), "/", jsx(NumberInput$1, { ref: monthInputRef, "aria-label": `Mois${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, 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, value: controlledValue && controlledValue[1] }), "/", jsx(NumberInput$1, { ref: yearInputRef, "aria-label": `Année${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, 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, value: controlledValue && controlledValue[0] })] }), !isCompact && jsx(Calendar, {})] }));
+    return (jsxs(Box$b, { 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' : ''}`, 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, value: controlledValue && controlledValue[2] }, `${key}-day`), "/", jsx(NumberInput$1, { ref: monthInputRef, "aria-label": `Mois${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, 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, value: controlledValue && controlledValue[1] }, `${key}-month`), "/", jsx(NumberInput$1, { ref: yearInputRef, "aria-label": `Année${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, onBack: () => monthInputRef.current?.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: onNext, onPrevious: () => monthInputRef.current?.focus(), size: 4, value: controlledValue && controlledValue[0] }, `${key}-year`)] }), !isCompact && jsx(Calendar, {})] }));
 }
 const DateInput = forwardRef(DateInputWithRef);
 const Box$b = styled.div `
@@ -21916,23 +21931,23 @@ function DatePicker({ baseContainer, className, defaultValue, disabled = false,
     const dateInputRef = useRef(null);
     const timeInputRef = useRef(null);
     /* eslint-enable no-null/no-null */
-    const isCalendarPickerOpenRef = useRef(false);
     const hasMountedRef = useRef(false);
     const selectedUtcDateAsDayjsRef = useRef(defaultValue ? customDayjs(defaultValue) : undefined);
     const selectedUtcDateTupleRef = useRef(getUtcDateTupleFromDayjs(selectedUtcDateAsDayjsRef.current));
     const selectedUtcTimeTupleRef = useRef(getUtcTimeTupleFromDayjs(selectedUtcDateAsDayjsRef.current));
-    const previousDefaultValue = usePrevious(defaultValue);
-    const { forceUpdate } = useForceUpdate();
+    const [isRangeCalendarPickerOpen, setIsRangeCalendarPickerOpen] = useState(false);
     const controlledClassName = useMemo(() => classnames('Field-DatePicker', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const defaultTimeTuple = useMemo(() => (isEndDate ? ['23', '59'] : ['00', '00']), [isEndDate]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
+    const previousDefaultValue = usePrevious(defaultValue);
+    const { forceUpdate } = useForceUpdate();
     const calendarPickerDefaultValue = useMemo(() => selectedUtcDateTupleRef.current
         ? getUtcDateFromDateAndTimeTuple(selectedUtcDateTupleRef.current, defaultTimeTuple)
         : undefined, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [selectedUtcDateTupleRef.current]);
-    const submit = useCallback(() => {
+    const callOnChange = useCallback(() => {
         if (!onChange || !selectedUtcDateAsDayjsRef.current) {
             return;
         }
@@ -21944,10 +21959,26 @@ function DatePicker({ baseContainer, className, defaultValue, disabled = false,
             onChange(nextDateAsDayjs.toDate());
         }
     }, [isStringDate, onChange]);
+    const callOnChangeUndefinedIfInputsAreEmpty = 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 closeCalendarPicker = useCallback(() => {
-        isCalendarPickerOpenRef.current = false;
-        forceUpdate();
-    }, [forceUpdate]);
+        setIsRangeCalendarPickerOpen(false);
+    }, []);
     const handleDateInputNext = useCallback(() => {
         if (!withTime || !timeInputRef.current) {
             return;
@@ -21956,81 +21987,57 @@ function DatePicker({ baseContainer, className, defaultValue, disabled = false,
     }, [withTime]);
     const handleDateInputChange = useCallback((nextUtcDateTuple, isFilled) => {
         selectedUtcDateTupleRef.current = nextUtcDateTuple;
-        // If there is no time input or a time has already been selected,
-        if (!withTime || selectedUtcTimeTupleRef.current) {
-            // we must update the selected date and call onChange()
+        // If there is NO time input OR there is a time input WHILE a time is selected,
+        if (!withTime || (withTime && selectedUtcTimeTupleRef.current)) {
+            // we must update the selected datetime and call `onChange()`
             const timeTuple = withTime && selectedUtcTimeTupleRef.current ? selectedUtcTimeTupleRef.current : defaultTimeTuple;
             selectedUtcDateAsDayjsRef.current = getDayjsFromUtcDateAndTimeTuple(nextUtcDateTuple, timeTuple, isEndDate);
-            submit();
+            callOnChange();
         }
         if (isFilled) {
             handleDateInputNext();
         }
-    }, [defaultTimeTuple, handleDateInputNext, isEndDate, submit, withTime]);
+    }, [callOnChange, defaultTimeTuple, handleDateInputNext, isEndDate, withTime]);
     const handleCalendarPickerChange = useCallback((nextUtcizedDateTuple) => {
-        // If this is a date picker without a time input,
+        // If there is NO time input,
         if (!withTime) {
+            // we update the selected datetime
             selectedUtcDateAsDayjsRef.current = getDayjsFromUtcDateAndTimeTuple(nextUtcizedDateTuple, 
-            // we set the time to the start (or end) of the day
+            // with a time set to the start (or end) of the day
             defaultTimeTuple, isEndDate);
         }
-        // If this is a date picker with a time input,
-        else {
-            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);
+        // If there is a time input AND a time is selected,
+        else if (selectedUtcTimeTupleRef.current) {
+            // we update the selected datetime
+            selectedUtcDateAsDayjsRef.current = getDayjsFromUtcDateAndTimeTuple(nextUtcizedDateTuple, selectedUtcTimeTupleRef.current, isEndDate);
         }
         selectedUtcDateTupleRef.current = nextUtcizedDateTuple;
         selectedUtcTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedUtcDateAsDayjsRef.current);
         closeCalendarPicker();
         forceUpdate();
-        submit();
-        if (withTime && !selectedUtcTimeTupleRef.current && timeInputRef.current) {
+        callOnChange();
+        if (withTime && timeInputRef.current) {
             timeInputRef.current.focus();
         }
-    }, [closeCalendarPicker, defaultTimeTuple, forceUpdate, isEndDate, submit, withTime]);
+    }, [callOnChange, closeCalendarPicker, defaultTimeTuple, forceUpdate, isEndDate, withTime]);
     const handleDisable = useCallback(() => {
         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
+    const handleTimeInputChange = useCallback((nextTimeTuple) => {
+        // If a date is selected
         if (selectedUtcDateTupleRef.current) {
-            // we must update the selected date accordingly and submit it
+            // we update the selected datetime
             const nextDateAsDayjs = getDayjsFromUtcDateAndTimeTuple(selectedUtcDateTupleRef.current, nextTimeTuple);
             selectedUtcDateAsDayjsRef.current = nextDateAsDayjs;
-            submit();
         }
         selectedUtcTimeTupleRef.current = nextTimeTuple;
-        submit();
-    }, [submit]);
+        callOnChange();
+    }, [callOnChange]);
     const openCalendarPicker = useCallback(() => {
-        isCalendarPickerOpenRef.current = true;
-        forceUpdate();
-    }, [forceUpdate]);
+        setIsRangeCalendarPickerOpen(true);
+    }, []);
     useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange, handleDisable);
     useClickOutsideEffect(boxRef, closeCalendarPicker, baseContainer);
     useEffect(() => {
@@ -22049,7 +22056,7 @@ function DatePicker({ baseContainer, className, defaultValue, disabled = false,
         selectedUtcTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedUtcDateAsDayjsRef.current);
         forceUpdate();
     }, [defaultValue, forceUpdate, previousDefaultValue]);
-    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, legend: label, style: style, ...nativeProps, children: [jsxs(Box$8, { ref: boxRef, "$hasError": hasError, "$isDisabled": disabled, children: [jsx(Field$1, { children: jsx(DateInput, { ref: dateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: isEndDate, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputChange, onClick: openCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleDateInputNext, value: selectedUtcDateTupleRef.current }) }), withTime && (jsx(Field$1, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current?.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onInput: handleDateOrTimeInputInput, onPrevious: () => dateInputRef.current?.focus(true), value: selectedUtcTimeTupleRef.current }, JSON.stringify(selectedUtcTimeTupleRef.current)) }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError }), jsx(CalendarPicker, { isHistorical: isHistorical, isOpen: isCalendarPickerOpenRef.current, onChange: handleCalendarPickerChange, value: calendarPickerDefaultValue })] }));
+    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, legend: label, style: style, ...nativeProps, children: [jsxs(Box$8, { ref: boxRef, "$hasError": hasError, "$isDisabled": disabled, children: [jsx(Field$1, { children: jsx(DateInput, { ref: dateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: isEndDate, isForcedFocused: isRangeCalendarPickerOpen, isLight: isLight, onChange: handleDateInputChange, onClick: openCalendarPicker, onInput: callOnChangeUndefinedIfInputsAreEmpty, onNext: handleDateInputNext, value: selectedUtcDateTupleRef.current }) }), withTime && (jsx(Field$1, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current?.focus(true), onChange: handleTimeInputChange, onFocus: closeCalendarPicker, onInput: callOnChangeUndefinedIfInputsAreEmpty, onPrevious: () => dateInputRef.current?.focus(true), value: selectedUtcTimeTupleRef.current }) }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError }), jsx(CalendarPicker, { isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpen, onChange: handleCalendarPickerChange, value: calendarPickerDefaultValue })] }));
 }
 const Box$8 = styled.div `
   * {
@@ -22299,18 +22306,18 @@ function DateRangePicker({ baseContainer, className, defaultValue, disabled = fa
     const endTimeInputRef = useRef(null);
     /* eslint-enable no-null/no-null */
     const hasMountedRef = useRef(false);
-    const isRangeCalendarPickerOpenRef = useRef(false);
-    const selectedStartDateAsDayjsRef = useRef(defaultValue ? customDayjs(defaultValue[0]) : undefined);
-    const selectedEndDateAsDayjsRef = useRef(defaultValue ? customDayjs(defaultValue[1]) : undefined);
-    const selectedStartDateTupleRef = useRef(getUtcDateTupleFromDayjs(selectedStartDateAsDayjsRef.current));
-    const selectedEndDateTupleRef = useRef(getUtcDateTupleFromDayjs(selectedEndDateAsDayjsRef.current));
-    const selectedStartTimeTupleRef = useRef(getUtcTimeTupleFromDayjs(selectedStartDateAsDayjsRef.current));
-    const selectedEndTimeTupleRef = useRef(getUtcTimeTupleFromDayjs(selectedEndDateAsDayjsRef.current));
-    const previousDefaultValue = usePrevious(defaultValue);
-    const { forceUpdate } = useForceUpdate();
+    const selectedStartDateTimeAsDayjsRef = useRef(defaultValue ? customDayjs(defaultValue[0]) : undefined);
+    const selectedStartDateTupleRef = useRef(getUtcDateTupleFromDayjs(selectedStartDateTimeAsDayjsRef.current));
+    const selectedStartTimeTupleRef = useRef(getUtcTimeTupleFromDayjs(selectedStartDateTimeAsDayjsRef.current));
+    const selectedEndDateTimeAsDayjsRef = useRef(defaultValue ? customDayjs(defaultValue[1]) : undefined);
+    const selectedEndDateTupleRef = useRef(getUtcDateTupleFromDayjs(selectedEndDateTimeAsDayjsRef.current));
+    const selectedEndTimeTupleRef = useRef(getUtcTimeTupleFromDayjs(selectedEndDateTimeAsDayjsRef.current));
+    const [isRangeCalendarPickerOpen, setIsRangeCalendarPickerOpen] = useState(false);
     const controlledClassName = useMemo(() => classnames('Field-DateRangePicker', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
+    const previousDefaultValue = usePrevious(defaultValue);
+    const { forceUpdate } = useForceUpdate();
     const rangeCalendarPickerDefaultValue = useMemo(() => selectedStartDateTupleRef.current && selectedEndDateTupleRef.current
         ? [
             getUtcDateFromDateAndTimeTuple(selectedStartDateTupleRef.current, ['00', '00']),
@@ -22319,26 +22326,53 @@ function DateRangePicker({ baseContainer, className, defaultValue, disabled = fa
         : undefined, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [selectedEndDateTupleRef.current, selectedStartDateTupleRef.current]);
-    const submit = useCallback(() => {
-        if (!onChange || !selectedStartDateAsDayjsRef.current || !selectedEndDateAsDayjsRef.current) {
+    const callOnChange = useCallback(() => {
+        if (!onChange || !selectedStartDateTimeAsDayjsRef.current || !selectedEndDateTimeAsDayjsRef.current) {
             return;
         }
         if (isStringDate) {
-            const startUtcDateAsString = selectedStartDateAsDayjsRef.current.utc().toISOString();
-            const endUtcDateAsString = selectedEndDateAsDayjsRef.current.utc().toISOString();
+            const startUtcDateAsString = selectedStartDateTimeAsDayjsRef.current.utc().toISOString();
+            const endUtcDateAsString = selectedEndDateTimeAsDayjsRef.current.utc().toISOString();
             const nextUtcDateAsStringRange = [startUtcDateAsString, endUtcDateAsString];
             onChange(nextUtcDateAsStringRange);
             return;
         }
-        const startUtcDate = selectedStartDateAsDayjsRef.current.toDate();
-        const endUtcDate = selectedEndDateAsDayjsRef.current.toDate();
+        const startUtcDate = selectedStartDateTimeAsDayjsRef.current.toDate();
+        const endUtcDate = selectedEndDateTimeAsDayjsRef.current.toDate();
         const nextDateRange = [startUtcDate, endUtcDate];
         onChange(nextDateRange);
     }, [isStringDate, onChange]);
+    const callOnChangeUndefinedIfInputsAreEmpty = 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 closeRangeCalendarPicker = useCallback(() => {
-        isRangeCalendarPickerOpenRef.current = false;
-        forceUpdate();
-    }, [forceUpdate]);
+        setIsRangeCalendarPickerOpen(false);
+    }, []);
     const handleDisable = useCallback(() => {
         selectedStartDateTupleRef.current = undefined;
         selectedStartTimeTupleRef.current = undefined;
@@ -22375,13 +22409,13 @@ function DateRangePicker({ baseContainer, className, defaultValue, disabled = fa
     const handleDateInputChange = useCallback((position, nextDateTuple, isFilled) => {
         if (position === DateRangePosition.START) {
             selectedStartDateTupleRef.current = nextDateTuple;
-            // If there is no time input or a start time has already been selected,
-            if (!withTime || selectedStartTimeTupleRef.current) {
-                // we must update the selected start date and call onChange()
+            // If there is NO time input OR there is a time input WHILE a start time is selected,
+            if (!withTime || (withTime && selectedStartTimeTupleRef.current)) {
+                // we update the selected start datetime
                 const startUtcTimeTuple = withTime && selectedStartTimeTupleRef.current ? selectedStartTimeTupleRef.current : ['00', '00'];
                 const nextStartDateAsDayjs = getDayjsFromUtcDateAndTimeTuple(nextDateTuple, startUtcTimeTuple);
-                selectedStartDateAsDayjsRef.current = nextStartDateAsDayjs;
-                submit();
+                selectedStartDateTimeAsDayjsRef.current = nextStartDateAsDayjs;
+                callOnChange();
             }
             if (isFilled) {
                 handleStartDateInputNext();
@@ -22389,106 +22423,73 @@ function DateRangePicker({ baseContainer, className, defaultValue, disabled = fa
         }
         else {
             selectedEndDateTupleRef.current = nextDateTuple;
-            // If there is no time input or an end time has already been selected,
-            if (!withTime || selectedEndTimeTupleRef.current) {
-                // we must update the selected end date and call onChange()
+            // If there is NO time input OR there is a time input WHILE a start time is selected,
+            if (!withTime || (withTime && selectedEndTimeTupleRef.current)) {
+                // we update the selected end datetime
                 const endTimeTuple = (withTime ? selectedEndTimeTupleRef.current : ['23', '59']);
                 const nextEndDateAsDayjs = getDayjsFromUtcDateAndTimeTuple(nextDateTuple, endTimeTuple, true);
-                selectedEndDateAsDayjsRef.current = nextEndDateAsDayjs;
-                submit();
+                selectedEndDateTimeAsDayjsRef.current = nextEndDateAsDayjs;
+                callOnChange();
             }
             if (isFilled) {
                 handleEndDateInputNext();
             }
         }
-    }, [handleEndDateInputNext, handleStartDateInputNext, submit, withTime]);
-    /**
-     * @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]);
+    }, [callOnChange, handleEndDateInputNext, handleStartDateInputNext, withTime]);
     const handleRangeCalendarPickerChange = useCallback((nextUtcDateTupleRange) => {
         const [nextStartUtcDateTuple, nextEndUtcDateTuple] = nextUtcDateTupleRange;
-        // If this is a date picker without a time input,
+        // If there is NO time input,
         if (!withTime) {
-            // we have to fix the start date at the beginning of the day
-            selectedStartDateAsDayjsRef.current = getDayjsFromUtcDateAndTimeTuple(nextStartUtcDateTuple, ['00', '00']);
-            // and the end date at the end of the day
-            selectedEndDateAsDayjsRef.current = getDayjsFromUtcDateAndTimeTuple(nextEndUtcDateTuple, ['23', '59'], true);
+            // we have to fix the start datetime at the beginning of the day
+            selectedStartDateTimeAsDayjsRef.current = getDayjsFromUtcDateAndTimeTuple(nextStartUtcDateTuple, ['00', '00']);
+            // and the end datetime at the end of the day
+            selectedEndDateTimeAsDayjsRef.current = getDayjsFromUtcDateAndTimeTuple(nextEndUtcDateTuple, ['23', '59'], true);
         }
-        // If this is a date picker with a time input,
+        // If there is a time input,
         else {
-            // we include the selected start time if it exists, set it at the beginning of the day if not
-            selectedStartDateAsDayjsRef.current = getDayjsFromUtcDateAndTimeTuple(nextStartUtcDateTuple, selectedStartTimeTupleRef.current || ['00', '00']);
-            // we include the selected end time if it exists, set it at the end of the day if not
-            selectedEndDateAsDayjsRef.current = getDayjsFromUtcDateAndTimeTuple(nextEndUtcDateTuple, selectedEndTimeTupleRef.current || ['23', '59'], true);
+            // AND there is BOTH a selected start time and a selected end time,
+            if (selectedStartTimeTupleRef.current && selectedEndTimeTupleRef.current) {
+                // we update the selected start datetime
+                selectedStartDateTimeAsDayjsRef.current = getDayjsFromUtcDateAndTimeTuple(nextStartUtcDateTuple, selectedStartTimeTupleRef.current);
+                // we update the selected start datetime
+                selectedEndDateTimeAsDayjsRef.current = getDayjsFromUtcDateAndTimeTuple(nextEndUtcDateTuple, selectedEndTimeTupleRef.current, true);
+            }
+            startTimeInputRef.current?.focus();
         }
         selectedStartDateTupleRef.current = nextStartUtcDateTuple;
-        selectedStartTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedStartDateAsDayjsRef.current);
+        selectedStartTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedStartDateTimeAsDayjsRef.current);
         selectedEndDateTupleRef.current = nextEndUtcDateTuple;
-        selectedEndTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedEndDateAsDayjsRef.current);
+        selectedEndTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedEndDateTimeAsDayjsRef.current);
         closeRangeCalendarPicker();
-        submit();
-    }, [closeRangeCalendarPicker, submit, withTime]);
-    const handleTimeInputFilled = useCallback((position, nextTimeTuple) => {
+        callOnChange();
+    }, [callOnChange, closeRangeCalendarPicker, withTime]);
+    const handleTimeInputChange = useCallback((position, nextTimeTuple) => {
         if (!endDateInputRef.current) {
             return;
         }
         if (position === DateRangePosition.START) {
-            // If a start date has already been selected
+            // If a start date is selected
             if (selectedStartDateTupleRef.current) {
-                // we must update the selected start date accordingly and submit it
+                // we update the selected start datetime and submit it
                 const nextStartDateAsDayjs = getDayjsFromUtcDateAndTimeTuple(selectedStartDateTupleRef.current, nextTimeTuple);
-                selectedStartDateAsDayjsRef.current = nextStartDateAsDayjs;
-                submit();
+                selectedStartDateTimeAsDayjsRef.current = nextStartDateAsDayjs;
             }
             selectedStartTimeTupleRef.current = nextTimeTuple;
-            endDateInputRef.current.focus();
         }
         else {
-            // If an end date has already been selected
+            // If an end date is selected
             if (selectedEndDateTupleRef.current) {
-                // we must update the selected end date accordingly and submit it
+                // we update the selected end datetime and submit it
                 const nextEndDateAsDayjs = getDayjsFromUtcDateAndTimeTuple(selectedEndDateTupleRef.current, nextTimeTuple, true);
-                selectedEndDateAsDayjsRef.current = nextEndDateAsDayjs;
-                submit();
+                selectedEndDateTimeAsDayjsRef.current = nextEndDateAsDayjs;
             }
             selectedEndTimeTupleRef.current = nextTimeTuple;
         }
-        submit();
-    }, [submit]);
+        callOnChange();
+    }, [callOnChange]);
     const openRangeCalendarPicker = useCallback(() => {
-        isRangeCalendarPickerOpenRef.current = true;
-        forceUpdate();
-    }, [forceUpdate]);
+        setIsRangeCalendarPickerOpen(true);
+    }, []);
     useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange, handleDisable);
     useClickOutsideEffect([endDateInputRef, startDateInputRef], closeRangeCalendarPicker, baseContainer);
     useEffect(() => {
@@ -22507,15 +22508,15 @@ function DateRangePicker({ baseContainer, className, defaultValue, disabled = fa
             lodashExports.isEqual(defaultValue, previousDefaultValue)) {
             return;
         }
-        selectedStartDateAsDayjsRef.current = defaultValue ? customDayjs(defaultValue[0]) : undefined;
-        selectedEndDateAsDayjsRef.current = defaultValue ? customDayjs(defaultValue[1]) : undefined;
-        selectedStartDateTupleRef.current = getUtcDateTupleFromDayjs(selectedStartDateAsDayjsRef.current);
-        selectedEndDateTupleRef.current = getUtcDateTupleFromDayjs(selectedEndDateAsDayjsRef.current);
-        selectedStartTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedStartDateAsDayjsRef.current);
-        selectedEndTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedEndDateAsDayjsRef.current);
+        selectedStartDateTimeAsDayjsRef.current = defaultValue ? customDayjs(defaultValue[0]) : undefined;
+        selectedEndDateTimeAsDayjsRef.current = defaultValue ? customDayjs(defaultValue[1]) : undefined;
+        selectedStartDateTupleRef.current = getUtcDateTupleFromDayjs(selectedStartDateTimeAsDayjsRef.current);
+        selectedEndDateTupleRef.current = getUtcDateTupleFromDayjs(selectedEndDateTimeAsDayjsRef.current);
+        selectedStartTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedStartDateTimeAsDayjsRef.current);
+        selectedEndTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedEndDateTimeAsDayjsRef.current);
         forceUpdate();
     }, [defaultValue, forceUpdate, previousDefaultValue]);
-    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, legend: label, style: style, ...nativeProps, children: [jsxs(Box$6, { "$hasError": hasError, "$isDisabled": disabled, children: [jsx(Field, { children: jsx(DateInput, { ref: startDateInputRef, baseContainer: baseContainer || undefined, 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, value: selectedStartDateTupleRef.current }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, baseContainer: baseContainer || undefined, 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), value: selectedStartTimeTupleRef.current }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, baseContainer: baseContainer || undefined, 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, value: selectedEndDateTupleRef.current }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, baseContainer: baseContainer || undefined, 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), value: selectedEndTimeTupleRef.current }) }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
+    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, legend: label, style: style, ...nativeProps, children: [jsxs(Box$6, { "$hasError": hasError, "$isDisabled": disabled, children: [jsx(Field, { children: jsx(DateInput, { ref: startDateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isForcedFocused: isRangeCalendarPickerOpen, isLight: isLight, isRange: true, isStartDate: true, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.START, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onInput: callOnChangeUndefinedIfInputsAreEmpty, onNext: handleStartDateInputNext, value: selectedStartDateTupleRef.current }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isLight: isLight, isStartDate: true, minutesRange: minutesRange, onBack: () => startDateInputRef.current?.focus(true), onChange: nextTimeTuple => handleTimeInputChange(DateRangePosition.START, nextTimeTuple), onFocus: closeRangeCalendarPicker, onInput: callOnChangeUndefinedIfInputsAreEmpty, onNext: () => endDateInputRef.current?.focus(), onPrevious: () => startDateInputRef.current?.focus(true), value: selectedStartTimeTupleRef.current }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpen, isLight: isLight, isRange: true, onBack: handleEndDateInputPrevious, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.END, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onInput: callOnChangeUndefinedIfInputsAreEmpty, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious, value: selectedEndDateTupleRef.current }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: true, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current?.focus(true), onChange: nextTimeTuple => handleTimeInputChange(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onInput: callOnChangeUndefinedIfInputsAreEmpty, onPrevious: () => endDateInputRef.current?.focus(true), value: selectedEndTimeTupleRef.current }) }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpen, onChange: handleRangeCalendarPickerChange }, JSON.stringify(rangeCalendarPickerDefaultValue))] }));
 }
 const Box$6 = styled.div `
   * {