@mtes-mct/monitor-ui 2.7.2 → 2.8.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [2.8.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.7.2...v2.8.0) (2023-01-17)
+
+
+### Features
+
+* **fields:** handle both Date & string dates in DatePicker & DateRangePicker ([6aacf70](https://github.com/MTES-MCT/monitor-ui/commit/6aacf7007bcbc789b9de643be2d192a1808b0afc))
+
+## [2.7.2](https://github.com/MTES-MCT/monitor-ui/compare/v2.7.1...v2.7.2) (2023-01-13)
+
+
+### Bug Fixes
+
+* **elements:** set Button icon size in px instead of rem ([363ffab](https://github.com/MTES-MCT/monitor-ui/commit/363ffab6d6d2c65e997eafa7378f4ead377cb6f2))
+
 ## [2.7.1](https://github.com/MTES-MCT/monitor-ui/compare/v2.7.0...v2.7.1) (2023-01-13)
 
 

package/README.md

@@ -55,7 +55,8 @@ Please read the [contributing document](CONTRIBUTING.md) for setup and contribut
 
 ---
 
-[img-github]: https://img.shields.io/github/workflow/status/MTES-MCT/monitor-ui/Check/main?style=flat-square
+[img-github]:
+  https://img.shields.io/github/actions/workflow/status/MTES-MCT/monitor-ui/check.yml?branch=main&style=flat-square
 [img-license]: https://img.shields.io/github/license/MTES-MCT/monitor-ui?style=flat-square
 [img-npm]: https://img.shields.io/npm/v/@mtes-mct/monitor-ui?style=flat-square
 [lnk-github]: https://github.com/MTES-MCT/monitor-ui/actions?query=branch%3Amain++

package/index.js

@@ -3442,7 +3442,7 @@ dayjs_minExports.tz.setDefault('UTC');
 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 = utcDate.getTimezoneOffset();
+    const timezoneOffsetInMinutes = new Date().getTimezoneOffset();
     return dayjs_minExports(utcDate).add(timezoneOffsetInMinutes, 'minutes');
 }
 
@@ -4463,27 +4463,32 @@ const Box$5 = styled.div `
 
 function DatePicker({ baseContainer, defaultValue, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
+disabled = false, 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();
     const isCalendarPickerOpenRef = useRef(false);
-    const selectedDateRef = useRef(defaultValue ? getLocalizedDayjs(defaultValue).toDate() : undefined);
-    const selectedDateTupleRef = useRef(getDateTupleFromDate(selectedDateRef.current));
-    const selectedTimeTupleRef = useRef(getTimeTupleFromDate(selectedDateRef.current));
+    const selectedLocalizedDateRef = useRef(defaultValue ? getLocalizedDayjs(defaultValue).toDate() : undefined);
+    const selectedLocalizedDateTupleRef = useRef(getDateTupleFromDate(selectedLocalizedDateRef.current));
+    const selectedLocalizedTimeTupleRef = useRef(getTimeTupleFromDate(selectedLocalizedDateRef.current));
     const { forceUpdate } = useForceUpdate();
-    const rangeCalendarPickerDefaultValue = useMemo(() => selectedDateTupleRef.current
-        ? getDateFromDateAndTimeTuple(selectedDateTupleRef.current, ['00', '00'])
+    const rangeCalendarPickerDefaultValue = useMemo(() => selectedLocalizedDateTupleRef.current
+        ? getDateFromDateAndTimeTuple(selectedLocalizedDateTupleRef.current, ['00', '00'])
         : undefined, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectedDateTupleRef.current]);
+    [selectedLocalizedDateTupleRef.current]);
     const submit = useCallback(() => {
-        if (!onChange || !selectedDateRef.current) {
+        if (!onChange || !selectedLocalizedDateRef.current) {
             return;
         }
-        const nextDate = getUtcizedDayjs(selectedDateRef.current).toDate();
-        onChange(nextDate);
-    }, [onChange]);
+        const nextDateAsDayjs = getUtcizedDayjs(selectedLocalizedDateRef.current);
+        if (isStringDate) {
+            onChange(nextDateAsDayjs.toISOString());
+        }
+        else {
+            onChange(nextDateAsDayjs.toDate());
+        }
+    }, [isStringDate, onChange]);
     const closeCalendarPicker = useCallback(() => {
         isCalendarPickerOpenRef.current = false;
         forceUpdate();
@@ -4495,13 +4500,13 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         timeInputRef.current.focus();
     }, [withTime]);
     const handleDateInputChange = useCallback((nextDateTuple, isFilled) => {
-        selectedDateTupleRef.current = nextDateTuple;
+        selectedLocalizedDateTupleRef.current = nextDateTuple;
         // If there is no time input or a time has already been selected,
-        if (!withTime || selectedTimeTupleRef.current) {
+        if (!withTime || selectedLocalizedTimeTupleRef.current) {
             // we must update the selected date and call onChange()
-            const timeTuple = (withTime ? selectedTimeTupleRef.current : ['00', '00']);
+            const timeTuple = (withTime ? selectedLocalizedTimeTupleRef.current : ['00', '00']);
             const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, timeTuple);
-            selectedDateRef.current = nextDate;
+            selectedLocalizedDateRef.current = getLocalizedDayjs(nextDate).toDate();
             submit();
         }
         if (isFilled) {
@@ -4513,32 +4518,32 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         if (!withTime) {
             // we have to fix the date at the beginning of the day
             const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, ['00', '00']);
-            selectedDateRef.current = nextDate;
+            selectedLocalizedDateRef.current = nextDate;
         }
         // 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, selectedTimeTupleRef.current || ['00', '00']);
-            selectedDateRef.current = nextDate;
+            const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, selectedLocalizedTimeTupleRef.current || ['00', '00']);
+            selectedLocalizedDateRef.current = nextDate;
         }
-        selectedDateTupleRef.current = nextDateTuple;
-        selectedTimeTupleRef.current = getTimeTupleFromDate(selectedDateRef.current);
+        selectedLocalizedDateTupleRef.current = nextDateTuple;
+        selectedLocalizedTimeTupleRef.current = getTimeTupleFromDate(selectedLocalizedDateRef.current);
         closeCalendarPicker();
         forceUpdate();
         submit();
-        if (withTime && !selectedTimeTupleRef.current) {
+        if (withTime && !selectedLocalizedTimeTupleRef.current) {
             timeInputRef.current.focus();
         }
     }, [closeCalendarPicker, forceUpdate, submit, withTime]);
     const handleTimeInputFilled = useCallback((nextTimeTuple) => {
         // If a date has already been selected
-        if (selectedDateTupleRef.current) {
+        if (selectedLocalizedDateTupleRef.current) {
             // we must update the selected date accordingly and submit it
-            const nextDate = getDateFromDateAndTimeTuple(selectedDateTupleRef.current, nextTimeTuple);
-            selectedDateRef.current = nextDate;
+            const nextDate = getDateFromDateAndTimeTuple(selectedLocalizedDateTupleRef.current, nextTimeTuple);
+            selectedLocalizedDateRef.current = nextDate;
             submit();
         }
-        selectedTimeTupleRef.current = nextTimeTuple;
+        selectedLocalizedTimeTupleRef.current = nextTimeTuple;
         submit();
     }, [submit]);
     const openCalendarPicker = useCallback(() => {
@@ -4546,7 +4551,7 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         forceUpdate();
     }, [forceUpdate]);
     useClickOutside(boxRef, closeCalendarPicker, baseContainer);
-    return (jsxs(Fieldset, { disabled: disabled, ...nativeProps, children: [jsx(Legend, { isDisabled: disabled, isHidden: isLabelHidden, children: label }), jsxs(Box$4, { ref: boxRef, children: [jsx(Field$1, { children: jsx(DateInput, { ref: dateInputRef, defaultValue: selectedDateTupleRef.current, disabled: disabled, isCompact: isCompact, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputChange, onClick: openCalendarPicker, onNext: handleDateInputNext }) }), withTime && (jsx(Field$1, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, baseContainer: baseContainer, defaultValue: selectedTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onPrevious: () => dateInputRef.current.focus(true) }) }))] }), jsx(CalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isCalendarPickerOpenRef.current, onChange: handleCalendarPickerChange })] }));
+    return (jsxs(Fieldset, { disabled: disabled, ...nativeProps, children: [jsx(Legend, { isDisabled: disabled, isHidden: isLabelHidden, children: label }), jsxs(Box$4, { ref: boxRef, children: [jsx(Field$1, { children: jsx(DateInput, { ref: dateInputRef, defaultValue: selectedLocalizedDateTupleRef.current, disabled: disabled, isCompact: isCompact, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputChange, onClick: openCalendarPicker, onNext: handleDateInputNext }) }), withTime && (jsx(Field$1, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, baseContainer: baseContainer, defaultValue: selectedLocalizedTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onPrevious: () => dateInputRef.current.focus(true) }) }))] }), jsx(CalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isCalendarPickerOpenRef.current, onChange: handleCalendarPickerChange })] }));
 }
 const Box$4 = styled.div `
   * {
@@ -4769,36 +4774,44 @@ var DateRangePosition;
 
 function DateRangePicker({ baseContainer, defaultValue, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
+disabled = false, 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();
     const isRangeCalendarPickerOpenRef = useRef(false);
-    const selectedStartDateRef = useRef(defaultValue ? getLocalizedDayjs(defaultValue[0]).toDate() : undefined);
-    const selectedEndDateRef = useRef(defaultValue ? getLocalizedDayjs(defaultValue[1]).toDate() : undefined);
-    const selectedStartDateTupleRef = useRef(getDateTupleFromDate(selectedStartDateRef.current));
-    const selectedEndDateTupleRef = useRef(getDateTupleFromDate(selectedEndDateRef.current));
-    const selectedStartTimeTupleRef = useRef(getTimeTupleFromDate(selectedStartDateRef.current));
-    const selectedEndTimeTupleRef = useRef(getTimeTupleFromDate(selectedEndDateRef.current));
+    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 { forceUpdate } = useForceUpdate();
-    const rangeCalendarPickerDefaultValue = useMemo(() => selectedStartDateTupleRef.current && selectedEndDateTupleRef.current
+    const rangeCalendarPickerDefaultValue = useMemo(() => selectedLocalizedStartDateTupleRef.current && selectedLocalizedEndDateTupleRef.current
         ? [
-            getDateFromDateAndTimeTuple(selectedStartDateTupleRef.current, ['00', '00']),
-            getDateFromDateAndTimeTuple(selectedEndDateTupleRef.current, ['00', '00'], true)
+            getDateFromDateAndTimeTuple(selectedLocalizedStartDateTupleRef.current, ['00', '00']),
+            getDateFromDateAndTimeTuple(selectedLocalizedEndDateTupleRef.current, ['00', '00'], true)
         ]
         : undefined, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectedEndDateTupleRef.current, selectedStartDateTupleRef.current]);
+    [selectedLocalizedEndDateTupleRef.current, selectedLocalizedStartDateTupleRef.current]);
     const submit = useCallback(() => {
-        if (!onChange || !selectedStartDateRef.current || !selectedEndDateRef.current) {
+        if (!onChange || !selectedLocalizedStartDateRef.current || !selectedLocalizedEndDateRef.current) {
             return;
         }
-        const utcizedStartDate = getUtcizedDayjs(selectedStartDateRef.current).toDate();
-        const utcizedEndDate = getUtcizedDayjs(selectedEndDateRef.current).toDate();
-        const nextDateRange = [utcizedStartDate, utcizedEndDate];
-        onChange(nextDateRange);
-    }, [onChange]);
+        if (isStringDate) {
+            const utcizedStartDateAsString = getUtcizedDayjs(selectedLocalizedStartDateRef.current).toISOString();
+            const utcizedEndDateAsString = getUtcizedDayjs(selectedLocalizedEndDateRef.current).toISOString();
+            const nextDateAsStringRange = [utcizedStartDateAsString, utcizedEndDateAsString];
+            onChange(nextDateAsStringRange);
+        }
+        else {
+            const utcizedStartDate = getUtcizedDayjs(selectedLocalizedStartDateRef.current).toDate();
+            const utcizedEndDate = getUtcizedDayjs(selectedLocalizedEndDateRef.current).toDate();
+            const nextDateRange = [utcizedStartDate, utcizedEndDate];
+            onChange(nextDateRange);
+        }
+    }, [isStringDate, onChange]);
     const closeRangeCalendarPicker = useCallback(() => {
         isRangeCalendarPickerOpenRef.current = false;
         forceUpdate();
@@ -4825,13 +4838,13 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
     }, [withTime]);
     const handleDateInputChange = useCallback((position, nextDateTuple, isFilled) => {
         if (position === DateRangePosition.START) {
-            selectedStartDateTupleRef.current = nextDateTuple;
+            selectedLocalizedStartDateTupleRef.current = nextDateTuple;
             // If there is no time input or a start time has already been selected,
-            if (!withTime || selectedStartTimeTupleRef.current) {
+            if (!withTime || selectedLocalizedStartTimeTupleRef.current) {
                 // we must update the selected start date and call onChange()
-                const startTimeTuple = (withTime ? selectedStartTimeTupleRef.current : ['00', '00']);
+                const startTimeTuple = (withTime ? selectedLocalizedStartTimeTupleRef.current : ['00', '00']);
                 const nextStartDate = getDateFromDateAndTimeTuple(nextDateTuple, startTimeTuple);
-                selectedStartDateRef.current = nextStartDate;
+                selectedLocalizedStartDateRef.current = nextStartDate;
                 submit();
             }
             if (isFilled) {
@@ -4839,13 +4852,13 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
             }
         }
         else {
-            selectedEndDateTupleRef.current = nextDateTuple;
+            selectedLocalizedEndDateTupleRef.current = nextDateTuple;
             // If there is no time input or an end time has already been selected,
-            if (!withTime || selectedEndTimeTupleRef.current) {
+            if (!withTime || selectedLocalizedEndTimeTupleRef.current) {
                 // we must update the selected end date and call onChange()
-                const endTimeTuple = (withTime ? selectedEndTimeTupleRef.current : ['23', '59']);
+                const endTimeTuple = (withTime ? selectedLocalizedEndTimeTupleRef.current : ['23', '59']);
                 const nextEndDate = getDateFromDateAndTimeTuple(nextDateTuple, endTimeTuple, true);
-                selectedEndDateRef.current = nextEndDate;
+                selectedLocalizedEndDateRef.current = nextEndDate;
                 submit();
             }
             if (isFilled) {
@@ -4861,22 +4874,22 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
             const nextStartDate = getDateFromDateAndTimeTuple(nextStartDateTuple, ['00', '00']);
             // and the end date at the end of the day
             const nextEndDate = getDateFromDateAndTimeTuple(nextEndDateTuple, ['23', '59'], true);
-            selectedStartDateRef.current = nextStartDate;
-            selectedEndDateRef.current = nextEndDate;
+            selectedLocalizedStartDateRef.current = nextStartDate;
+            selectedLocalizedEndDateRef.current = nextEndDate;
         }
         // 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, selectedStartTimeTupleRef.current || ['00', '00']);
-            selectedStartDateRef.current = nextStartDate;
+            const nextStartDate = getDateFromDateAndTimeTuple(nextStartDateTuple, selectedLocalizedStartTimeTupleRef.current || ['00', '00']);
+            selectedLocalizedStartDateRef.current = nextStartDate;
             // we include the selected end time if it exists, set it at the end of the day if not
-            const nextEndDate = getDateFromDateAndTimeTuple(nextEndDateTuple, selectedEndTimeTupleRef.current || ['23', '59'], true);
-            selectedEndDateRef.current = nextEndDate;
+            const nextEndDate = getDateFromDateAndTimeTuple(nextEndDateTuple, selectedLocalizedEndTimeTupleRef.current || ['23', '59'], true);
+            selectedLocalizedEndDateRef.current = nextEndDate;
         }
-        selectedStartDateTupleRef.current = nextStartDateTuple;
-        selectedStartTimeTupleRef.current = getTimeTupleFromDate(selectedStartDateRef.current);
-        selectedEndDateTupleRef.current = nextEndDateTuple;
-        selectedEndTimeTupleRef.current = getTimeTupleFromDate(selectedEndDateRef.current);
+        selectedLocalizedStartDateTupleRef.current = nextStartDateTuple;
+        selectedLocalizedStartTimeTupleRef.current = getTimeTupleFromDate(selectedLocalizedStartDateRef.current);
+        selectedLocalizedEndDateTupleRef.current = nextEndDateTuple;
+        selectedLocalizedEndTimeTupleRef.current = getTimeTupleFromDate(selectedLocalizedEndDateRef.current);
         closeRangeCalendarPicker();
         forceUpdate();
         submit();
@@ -4884,24 +4897,24 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
     const handleTimeInputFilled = useCallback((position, nextTimeTuple) => {
         if (position === DateRangePosition.START) {
             // If a start date has already been selected
-            if (selectedStartDateTupleRef.current) {
+            if (selectedLocalizedStartDateTupleRef.current) {
                 // we must update the selected start date accordingly and submit it
-                const nextStartDate = getDateFromDateAndTimeTuple(selectedStartDateTupleRef.current, nextTimeTuple);
-                selectedStartDateRef.current = nextStartDate;
+                const nextStartDate = getDateFromDateAndTimeTuple(selectedLocalizedStartDateTupleRef.current, nextTimeTuple);
+                selectedLocalizedStartDateRef.current = nextStartDate;
                 submit();
             }
-            selectedStartTimeTupleRef.current = nextTimeTuple;
+            selectedLocalizedStartTimeTupleRef.current = nextTimeTuple;
             endDateInputRef.current.focus();
         }
         else {
             // If an end date has already been selected
-            if (selectedEndDateTupleRef.current) {
+            if (selectedLocalizedEndDateTupleRef.current) {
                 // we must update the selected end date accordingly and submit it
-                const nextEndDate = getDateFromDateAndTimeTuple(selectedEndDateTupleRef.current, nextTimeTuple, true);
-                selectedEndDateRef.current = nextEndDate;
+                const nextEndDate = getDateFromDateAndTimeTuple(selectedLocalizedEndDateTupleRef.current, nextTimeTuple, true);
+                selectedLocalizedEndDateRef.current = nextEndDate;
                 submit();
             }
-            selectedEndTimeTupleRef.current = nextTimeTuple;
+            selectedLocalizedEndTimeTupleRef.current = nextTimeTuple;
         }
         submit();
     }, [submit]);
@@ -4910,7 +4923,7 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         forceUpdate();
     }, [forceUpdate]);
     useClickOutside([endDateInputRef, startDateInputRef], closeRangeCalendarPicker, baseContainer);
-    return (jsxs(Fieldset, { ...nativeProps, children: [jsx(Legend, { isDisabled: disabled, isHidden: isLabelHidden, children: label }), jsxs(Box$2, { isDisabled: disabled, children: [jsx(Field, { children: jsx(DateInput, { ref: startDateInputRef, defaultValue: selectedStartDateTupleRef.current, disabled: disabled, isCompact: isCompact, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isStartDate: true, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.START, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onNext: handleStartDateInputNext }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, baseContainer: baseContainer, defaultValue: 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, onNext: () => endDateInputRef.current.focus(), onPrevious: () => startDateInputRef.current.focus(true) }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, defaultValue: selectedEndDateTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, onBack: handleEndDateInputPrevious, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.END, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, baseContainer: baseContainer, defaultValue: 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, onPrevious: () => endDateInputRef.current.focus(true) }) }))] }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
+    return (jsxs(Fieldset, { ...nativeProps, children: [jsx(Legend, { isDisabled: disabled, isHidden: isLabelHidden, children: label }), jsxs(Box$2, { isDisabled: disabled, children: [jsx(Field, { children: jsx(DateInput, { ref: startDateInputRef, defaultValue: selectedLocalizedStartDateTupleRef.current, disabled: disabled, isCompact: isCompact, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isStartDate: true, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.START, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onNext: handleStartDateInputNext }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, baseContainer: baseContainer, defaultValue: selectedLocalizedStartTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isLight: isLight, isStartDate: true, minutesRange: minutesRange, onBack: () => startDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.START, nextTimeTuple), onFocus: closeRangeCalendarPicker, onNext: () => endDateInputRef.current.focus(), onPrevious: () => startDateInputRef.current.focus(true) }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, defaultValue: selectedLocalizedEndDateTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, onBack: handleEndDateInputPrevious, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.END, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, baseContainer: baseContainer, defaultValue: selectedLocalizedEndTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: true, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onPrevious: () => endDateInputRef.current.focus(true) }) }))] }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
 }
 const Box$2 = styled.div `
   * {
@@ -5335,18 +5348,20 @@ function FormikCheckbox({ name, ...originalProps }) {
     return jsx(Checkbox, { defaultChecked: defaultChecked, name: name, onChange: helpers.setValue, ...originalProps });
 }
 
+const UntypedDatePicker = DatePicker;
 function FormikDatePicker({ name, ...originalProps }) {
     const [field, , helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    return jsx(DatePicker, { defaultValue: defaultValue, onChange: helpers.setValue, ...originalProps });
+    return jsx(UntypedDatePicker, { defaultValue: defaultValue, onChange: helpers.setValue, ...originalProps });
 }
 
+const UntypedDateRangePicker = DateRangePicker;
 function FormikDateRangePicker({ name, ...originalProps }) {
     const [field, , helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    return jsx(DateRangePicker, { defaultValue: defaultValue, onChange: helpers.setValue, ...originalProps });
+    return jsx(UntypedDateRangePicker, { defaultValue: defaultValue, onChange: helpers.setValue, ...originalProps });
 }
 
 function FormikEffect({ onChange }) {