@mtes-mct/monitor-ui 5.3.0 → 5.3.1

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [5.3.0](https://github.com/MTES-MCT/monitor-ui/compare/v5.2.2...v5.3.0) (2023-04-12)
+
+
+### Bug Fixes
+
+* **fields:** update value in MultiCheckbox on value prop change ([c9a11c8](https://github.com/MTES-MCT/monitor-ui/commit/c9a11c85c4b35f5df2979916588e0ab091ffd06f))
+* **fields:** update value in MultiRadio on value prop change ([a230925](https://github.com/MTES-MCT/monitor-ui/commit/a230925361a54bad0251159600dba4c87965867b))
+
+
+### Features
+
+* **fields:** add isErrorMessageHidden prop to fields ([f5d498d](https://github.com/MTES-MCT/monitor-ui/commit/f5d498da707133d5cb45105da5675f48b368664b))
+
 ## [5.2.1](https://github.com/MTES-MCT/monitor-ui/compare/v5.2.0...v5.2.1) (2023-04-11)
 
 

package/fields/DateRangePicker/DateInput.d.ts

@@ -4,7 +4,6 @@ import type { DateTuple, DateInputRef } from './types';
 import type { Promisable } from 'type-fest';
 export type DateInputProps = Pick<NumberInputProps, 'onBack' | 'onPrevious' | 'onNext'> & {
     baseContainer: Document | HTMLDivElement | undefined;
-    defaultValue?: DateTuple | undefined;
     disabled: boolean;
     isCompact: boolean;
     isEndDate?: boolean | undefined;
@@ -23,10 +22,10 @@ export type DateInputProps = Pick<NumberInputProps, 'onBack' | 'onPrevious' | 'o
     onClick: () => Promisable<void>;
     /** Called each time any date input receive a keyboard-input change whether the value is valid or not. */
     onInput: () => Promisable<void>;
+    value?: DateTuple | undefined;
 };
 export declare const DateInput: import("react").ForwardRefExoticComponent<Pick<NumberInputProps, "onBack" | "onNext" | "onPrevious"> & {
     baseContainer: Document | HTMLDivElement | undefined;
-    defaultValue?: DateTuple | undefined;
     disabled: boolean;
     isCompact: boolean;
     isEndDate?: boolean | undefined;
@@ -45,4 +44,5 @@ export declare const DateInput: import("react").ForwardRefExoticComponent<Pick<N
     onClick: () => Promisable<void>;
     /** Called each time any date input receive a keyboard-input change whether the value is valid or not. */
     onInput: () => Promisable<void>;
+    value?: DateTuple | undefined;
 } & import("react").RefAttributes<DateInputRef>>;

package/fields/DateRangePicker/NumberInput.d.ts

@@ -1,6 +1,6 @@
 import type { InputHTMLAttributes } from 'react';
 import type { Promisable } from 'type-fest';
-export type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onInput' | 'pattern' | 'type' | 'value'> & {
+export type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'maxLength' | 'onInput' | 'pattern' | 'type'> & {
     isLight: boolean;
     max: number;
     min: number;
@@ -16,7 +16,7 @@ export type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'maxL
     onPrevious?: (() => Promisable<void>) | undefined;
     size: number;
 };
-export declare const NumberInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "pattern" | "value" | "onInput" | "type" | "maxLength"> & {
+export declare const NumberInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "pattern" | "defaultValue" | "onInput" | "type" | "maxLength"> & {
     isLight: boolean;
     max: number;
     min: number;

package/fields/DateRangePicker/TimeInput.d.ts

@@ -4,7 +4,6 @@ import type { TimeInputRef, TimeTuple } from './types';
 import type { Promisable } from 'type-fest';
 export type TimeInputProps = Pick<NumberInputProps, 'onBack' | 'onPrevious' | 'onNext'> & {
     baseContainer?: Document | HTMLDivElement | undefined;
-    defaultValue?: TimeTuple | undefined;
     disabled: boolean;
     isCompact: boolean;
     isEndDate?: boolean | undefined;
@@ -18,10 +17,10 @@ export type TimeInputProps = Pick<NumberInputProps, 'onBack' | 'onPrevious' | 'o
     onInput: () => Promisable<void>;
     onNext?: (() => Promisable<void>) | undefined;
     onPrevious?: (() => Promisable<void>) | undefined;
+    value?: TimeTuple | undefined;
 };
 export declare const TimeInput: import("react").ForwardRefExoticComponent<Pick<NumberInputProps, "onBack" | "onNext" | "onPrevious"> & {
     baseContainer?: Document | HTMLDivElement | undefined;
-    defaultValue?: TimeTuple | undefined;
     disabled: boolean;
     isCompact: boolean;
     isEndDate?: boolean | undefined;
@@ -35,4 +34,5 @@ export declare const TimeInput: import("react").ForwardRefExoticComponent<Pick<N
     onInput: () => Promisable<void>;
     onNext?: (() => Promisable<void>) | undefined;
     onPrevious?: (() => Promisable<void>) | undefined;
+    value?: TimeTuple | undefined;
 } & import("react").RefAttributes<TimeInputRef>>;

package/hooks/useFieldControl.d.ts

@@ -6,4 +6,5 @@ export declare function useFieldControl<T>(value: T, onChange: ((nextValue: T) =
 }): {
     controlledOnChange: (nextValue: T) => Promisable<void>;
     controlledValue: T | undefined;
+    setInternalValue: (nextValue: T) => Promisable<void>;
 };

package/index.js

@@ -21252,12 +21252,6 @@ const getRangedTimeOptions = (minutesRange) => {
         };
     });
 };
-function getTimeTupleFromUtcDate(utcDate) {
-    if (!utcDate) {
-        return undefined;
-    }
-    return [formatNumberAsDoubleDigit(utcDate.getHours()), formatNumberAsDoubleDigit(utcDate.getMinutes())];
-}
 function getUtcDateTupleFromDayjs(dateAsDayjs) {
     if (!dateAsDayjs) {
         return undefined;
@@ -21315,6 +21309,7 @@ const Box$b = styled.div `
 
     .rs-picker-toggle {
       border: 0 !important;
+      box-shadow: none;
       padding: 0;
 
       * {
@@ -21455,7 +21450,7 @@ const Box$b = styled.div `
   }
 `;
 
-function NumberInputWithRef({ defaultValue, isLight, max, min, onBack, onClick, onFilled, onFocus, onFormatError, onInput, onNext, onPrevious, size, ...nativeProps }, ref) {
+function NumberInputWithRef({ isLight, max, min, onBack, onClick, onFilled, onFocus, onFormatError, onInput, onNext, onPrevious, size, value, ...nativeProps }, ref) {
     // eslint-disable-next-line no-null/no-null
     const inputRef = useRef(null);
     const placeholder = useMemo(() => '-'.repeat(size), [size]);
@@ -21480,11 +21475,10 @@ function NumberInputWithRef({ defaultValue, isLight, max, min, onBack, onClick,
             return;
         }
         onFormatError(false);
-        const { value } = inputRef.current;
         if (onInput) {
-            onInput(value);
+            onInput(inputRef.current.value);
         }
-        if (value.length !== size) {
+        if (inputRef.current.value.length !== size) {
             return;
         }
         const valueAsNumber = Number(inputRef.current.value);
@@ -21492,7 +21486,7 @@ function NumberInputWithRef({ defaultValue, isLight, max, min, onBack, onClick,
             onFormatError(true);
             return;
         }
-        if (onFilled && value.length === size) {
+        if (onFilled && inputRef.current.value.length === size) {
             onFilled();
         }
     }, [max, min, onFilled, onFormatError, onInput, size]);
@@ -21523,7 +21517,7 @@ function NumberInputWithRef({ defaultValue, isLight, max, min, onBack, onClick,
             onBack();
         }
     }, [onBack, onNext, onPrevious]);
-    return (jsx(StyledNumberInput, { ref: inputRef, "$isLight": isLight, "$size": size, defaultValue: defaultValue, maxLength: size, onClick: handleClick, onFocus: handleFocus, onInput: handleInput, onKeyDown: handleKeyDown, pattern: "\\d*", placeholder: placeholder, type: "text", ...nativeProps }, String(defaultValue)));
+    return (jsx(StyledNumberInput, { ref: inputRef, "$isLight": isLight, "$size": size, defaultValue: value, maxLength: size, onClick: handleClick, onFocus: handleFocus, onInput: handleInput, onKeyDown: handleKeyDown, pattern: "\\d*", placeholder: placeholder, type: "text", ...nativeProps }, String(value)));
 }
 const NumberInput$1 = forwardRef(NumberInputWithRef);
 const StyledNumberInput = styled.input `
@@ -21542,17 +21536,24 @@ const StyledNumberInput = styled.input `
   }
 `;
 
-function DateInputWithRef({ baseContainer, defaultValue, disabled = false, isCompact, isEndDate = false, isForcedFocused, isLight, isRange = false, isStartDate = false, onBack, onChange, onClick, onInput, onNext, onPrevious }, ref) {
+function DateInputWithRef({ baseContainer, disabled = false, isCompact, isEndDate = false, isForcedFocused, isLight, isRange = false, isStartDate = false, onBack, onChange, onClick, onInput, onNext, onPrevious, value }, 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 lastValueBeforeFocusRef = useRef(value);
     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]);
+    const controlledValue = useMemo(() => {
+        if (!isFocused) {
+            lastValueBeforeFocusRef.current = value;
+        }
+        return lastValueBeforeFocusRef.current;
+    }, [isFocused, value]);
     useImperativeHandle(ref, () => ({
         box: boxRef.current,
         contains: boxRef.current ? boxRef.current.contains.bind(boxRef.current) : () => false,
@@ -21610,7 +21611,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: [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, {})] }));
+    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' : ''}`, 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, {})] }));
 }
 const DateInput = forwardRef(DateInputWithRef);
 const Box$a = styled.div `
@@ -21736,18 +21737,19 @@ const Option = styled.div `
   }
 `;
 
-function TimeInputWithRef({ baseContainer, defaultValue, disabled = false, isCompact, isEndDate = false, isLight, isStartDate = false, minutesRange = 15, onBack, onChange, onFocus, onInput, onNext, onPrevious }, ref) {
+function TimeInputWithRef({ baseContainer, disabled = false, isCompact, isEndDate = false, isLight, isStartDate = false, minutesRange = 15, onBack, onChange, onFocus, onInput, onNext, onPrevious, value }, 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 [controlledValue, setControlledValue] = useState(value);
     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 previousValue = usePrevious(value);
     const baseDocument = useMemo(() => (isHtmlElement(baseContainer) ? baseContainer.ownerDocument : window.document), [baseContainer]);
     useImperativeHandle(ref, () => ({
         box: boxRef.current,
@@ -21794,7 +21796,7 @@ function TimeInputWithRef({ baseContainer, defaultValue, disabled = false, isCom
     }, [onInput]);
     const handleTimePickerChange = useCallback((nextTimeTuple) => {
         closeRangedTimePicker();
-        setControlledDefaultValue(nextTimeTuple);
+        setControlledValue(nextTimeTuple);
         onChange(nextTimeTuple);
     }, [closeRangedTimePicker, onChange]);
     const openRangedTimePicker = useCallback(() => {
@@ -21819,7 +21821,13 @@ 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, onInput: onInput, onNext: onNext, onPrevious: () => hourInputRef.current?.focus(), size: 2 })] }), !isCompact && jsx(Clock, {})] }), isTimePickerOpen && (jsx(RangedTimePicker, { filter: timePickerFilter, minutesRange: minutesRange, onChange: handleTimePickerChange }))] }));
+    useEffect(() => {
+        if (lodashExports.isEqual(value, previousValue) || isFocused) {
+            return;
+        }
+        setControlledValue(value);
+    }, [isFocused, previousValue, value]);
+    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' : ''}`, 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, value: controlledValue && controlledValue[0] }), ":", jsx(NumberInput$1, { ref: minuteInputRef, "aria-label": `Minute${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, 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, value: controlledValue && controlledValue[1] })] }), !isCompact && jsx(Clock, {})] }), isTimePickerOpen && (jsx(RangedTimePicker, { filter: timePickerFilter, minutesRange: minutesRange, onChange: handleTimePickerChange }))] }));
 }
 const TimeInput = forwardRef(TimeInputWithRef);
 const Box$8 = styled.div `
@@ -21862,9 +21870,11 @@ function DatePicker({ baseContainer, className, defaultValue, disabled = false,
     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 controlledError = useMemo(() => normalizeString(error), [error]);
     const defaultTimeTuple = useMemo(() => (isEndDate ? ['23', '59'] : ['00', '00']), [isEndDate]);
@@ -21975,7 +21985,23 @@ 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: 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)) }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError }), jsx(CalendarPicker, { isHistorical: isHistorical, isOpen: isCalendarPickerOpenRef.current, onChange: handleCalendarPickerChange, value: calendarPickerDefaultValue })] }));
+    useEffect(() => {
+        if (!hasMountedRef.current) {
+            hasMountedRef.current = true;
+            return;
+        }
+        if ((defaultValue instanceof Date &&
+            previousDefaultValue instanceof Date &&
+            defaultValue.toISOString() === previousDefaultValue.toISOString()) ||
+            defaultValue === previousDefaultValue) {
+            return;
+        }
+        selectedUtcDateAsDayjsRef.current = defaultValue ? customDayjs(defaultValue) : undefined;
+        selectedUtcDateTupleRef.current = getUtcDateTupleFromDayjs(selectedUtcDateAsDayjsRef.current);
+        selectedUtcTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedUtcDateAsDayjsRef.current);
+        forceUpdate();
+    }, [defaultValue, forceUpdate, previousDefaultValue]);
+    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, 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 })] }));
 }
 const Box$7 = styled.div `
   * {
@@ -22052,6 +22078,7 @@ const Box$6 = styled.div `
     .rs-picker-toggle {
       border: 0 !important;
       padding: 0;
+      box-shadow: none;
 
       * {
         display: none;
@@ -22212,13 +22239,15 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
     const endDateInputRef = useRef(null);
     const endTimeInputRef = useRef(null);
     /* eslint-enable no-null/no-null */
+    const hasMountedRef = useRef(false);
     const isRangeCalendarPickerOpenRef = useRef(false);
-    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 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 controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
@@ -22231,21 +22260,20 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [selectedEndDateTupleRef.current, selectedStartDateTupleRef.current]);
     const submit = useCallback(() => {
-        if (!onChange || !selectedStartUtcDateRef.current || !selectedEndUtcDateRef.current) {
+        if (!onChange || !selectedStartDateAsDayjsRef.current || !selectedEndDateAsDayjsRef.current) {
             return;
         }
         if (isStringDate) {
-            const utcizedStartDateAsString = selectedStartUtcDateRef.current.toISOString();
-            const utcizedEndDateAsString = selectedEndUtcDateRef.current.toISOString();
-            const nextDateAsStringRange = [utcizedStartDateAsString, utcizedEndDateAsString];
-            onChange(nextDateAsStringRange);
-        }
-        else {
-            const utcizedStartDate = selectedStartUtcDateRef.current;
-            const utcizedEndDate = selectedEndUtcDateRef.current;
-            const nextDateRange = [utcizedStartDate, utcizedEndDate];
-            onChange(nextDateRange);
+            const startUtcDateAsString = selectedStartDateAsDayjsRef.current.utc().toISOString();
+            const endUtcDateAsString = selectedEndDateAsDayjsRef.current.utc().toISOString();
+            const nextUtcDateAsStringRange = [startUtcDateAsString, endUtcDateAsString];
+            onChange(nextUtcDateAsStringRange);
+            return;
         }
+        const startUtcDate = selectedStartDateAsDayjsRef.current.toDate();
+        const endUtcDate = selectedEndDateAsDayjsRef.current.toDate();
+        const nextDateRange = [startUtcDate, endUtcDate];
+        onChange(nextDateRange);
     }, [isStringDate, onChange]);
     const closeRangeCalendarPicker = useCallback(() => {
         isRangeCalendarPickerOpenRef.current = false;
@@ -22291,8 +22319,8 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
             if (!withTime || selectedStartTimeTupleRef.current) {
                 // we must update the selected start date and call onChange()
                 const startUtcTimeTuple = withTime && selectedStartTimeTupleRef.current ? selectedStartTimeTupleRef.current : ['00', '00'];
-                const nextStartDate = getUtcDateFromDateAndTimeTuple(nextDateTuple, startUtcTimeTuple);
-                selectedStartUtcDateRef.current = nextStartDate;
+                const nextStartDateAsDayjs = getDayjsFromUtcDateAndTimeTuple(nextDateTuple, startUtcTimeTuple);
+                selectedStartDateAsDayjsRef.current = nextStartDateAsDayjs;
                 submit();
             }
             if (isFilled) {
@@ -22305,8 +22333,8 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
             if (!withTime || selectedEndTimeTupleRef.current) {
                 // we must update the selected end date and call onChange()
                 const endTimeTuple = (withTime ? selectedEndTimeTupleRef.current : ['23', '59']);
-                const nextEndDate = getUtcDateFromDateAndTimeTuple(nextDateTuple, endTimeTuple, true);
-                selectedEndUtcDateRef.current = nextEndDate;
+                const nextEndDateAsDayjs = getDayjsFromUtcDateAndTimeTuple(nextDateTuple, endTimeTuple, true);
+                selectedEndDateAsDayjsRef.current = nextEndDateAsDayjs;
                 submit();
             }
             if (isFilled) {
@@ -22352,21 +22380,21 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
         // 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
-            selectedStartUtcDateRef.current = getUtcDateFromDateAndTimeTuple(nextStartUtcDateTuple, ['00', '00']);
+            selectedStartDateAsDayjsRef.current = getDayjsFromUtcDateAndTimeTuple(nextStartUtcDateTuple, ['00', '00']);
             // and the end date at the end of the day
-            selectedEndUtcDateRef.current = getUtcDateFromDateAndTimeTuple(nextEndUtcDateTuple, ['23', '59'], true);
+            selectedEndDateAsDayjsRef.current = getDayjsFromUtcDateAndTimeTuple(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
-            selectedStartUtcDateRef.current = getUtcDateFromDateAndTimeTuple(nextStartUtcDateTuple, selectedStartTimeTupleRef.current || ['00', '00']);
+            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
-            selectedEndUtcDateRef.current = getUtcDateFromDateAndTimeTuple(nextEndUtcDateTuple, selectedEndTimeTupleRef.current || ['23', '59'], true);
+            selectedEndDateAsDayjsRef.current = getDayjsFromUtcDateAndTimeTuple(nextEndUtcDateTuple, selectedEndTimeTupleRef.current || ['23', '59'], true);
         }
         selectedStartDateTupleRef.current = nextStartUtcDateTuple;
-        selectedStartTimeTupleRef.current = getTimeTupleFromUtcDate(selectedStartUtcDateRef.current);
+        selectedStartTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedStartDateAsDayjsRef.current);
         selectedEndDateTupleRef.current = nextEndUtcDateTuple;
-        selectedEndTimeTupleRef.current = getTimeTupleFromUtcDate(selectedEndUtcDateRef.current);
+        selectedEndTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedEndDateAsDayjsRef.current);
         closeRangeCalendarPicker();
         submit();
     }, [closeRangeCalendarPicker, submit, withTime]);
@@ -22378,8 +22406,8 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
             // If a start date has already been selected
             if (selectedStartDateTupleRef.current) {
                 // we must update the selected start date accordingly and submit it
-                const nextStartDate = getUtcDateFromDateAndTimeTuple(selectedStartDateTupleRef.current, nextTimeTuple);
-                selectedStartUtcDateRef.current = nextStartDate;
+                const nextStartDateAsDayjs = getDayjsFromUtcDateAndTimeTuple(selectedStartDateTupleRef.current, nextTimeTuple);
+                selectedStartDateAsDayjsRef.current = nextStartDateAsDayjs;
                 submit();
             }
             selectedStartTimeTupleRef.current = nextTimeTuple;
@@ -22389,8 +22417,8 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
             // If an end date has already been selected
             if (selectedEndDateTupleRef.current) {
                 // we must update the selected end date accordingly and submit it
-                const nextEndDate = getUtcDateFromDateAndTimeTuple(selectedEndDateTupleRef.current, nextTimeTuple, true);
-                selectedEndUtcDateRef.current = nextEndDate;
+                const nextEndDateAsDayjs = getDayjsFromUtcDateAndTimeTuple(selectedEndDateTupleRef.current, nextTimeTuple, true);
+                selectedEndDateAsDayjsRef.current = nextEndDateAsDayjs;
                 submit();
             }
             selectedEndTimeTupleRef.current = nextTimeTuple;
@@ -22403,7 +22431,31 @@ 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: 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) }) }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
+    useEffect(() => {
+        if (!hasMountedRef.current) {
+            hasMountedRef.current = true;
+            return;
+        }
+        if ((defaultValue &&
+            previousDefaultValue &&
+            defaultValue[0] instanceof Date &&
+            defaultValue[1] instanceof Date &&
+            previousDefaultValue[0] instanceof Date &&
+            previousDefaultValue[1] instanceof Date &&
+            defaultValue[0].toISOString() === previousDefaultValue[0].toISOString() &&
+            defaultValue[1].toISOString() === previousDefaultValue[1].toISOString()) ||
+            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);
+        forceUpdate();
+    }, [defaultValue, forceUpdate, previousDefaultValue]);
+    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, 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 })] }));
 }
 const Box$5 = styled.div `
   * {
@@ -22448,6 +22500,10 @@ function useFieldControl(value, onChange, props) {
             onChange(nextValue);
         }
     }, [onChange]);
+    const setInternalValue = useCallback((nextValue) => {
+        internalValueRef.current = nextValue;
+        forceUpdate();
+    }, [forceUpdate]);
     // We update the `internalValue` each time the `value` prop is updated
     useEffect(() => {
         if (lodashExports.isEqual(value, previousValue)) {
@@ -22456,7 +22512,7 @@ function useFieldControl(value, onChange, props) {
         internalValueRef.current = value;
         forceUpdate();
     }, [forceUpdate, previousValue, value]);
-    return { controlledOnChange, controlledValue };
+    return { controlledOnChange, controlledValue, setInternalValue };
 }
 
 function MultiCheckbox({ disabled = false, error, isErrorMessageHidden = false, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options, value }) {
@@ -33207,20 +33263,16 @@ const UntypedDatePicker = DatePicker;
 function FormikDatePicker({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const defaultValue = useMemo(() => field.value, []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return jsx(UntypedDatePicker, { defaultValue: defaultValue, error: meta.error, onChange: handleChange, ...originalProps });
+    return jsx(UntypedDatePicker, { defaultValue: field.value, error: meta.error, onChange: handleChange, ...originalProps });
 }
 
 const UntypedDateRangePicker = DateRangePicker;
 function FormikDateRangePicker({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const defaultValue = useMemo(() => field.value, []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return (jsx(UntypedDateRangePicker, { defaultValue: defaultValue, error: meta.error, onChange: handleChange, ...originalProps }));
+    return (jsx(UntypedDateRangePicker, { defaultValue: field.value, error: meta.error, onChange: handleChange, ...originalProps }));
 }
 
 function FormikEffect({ onChange }) {