@mtes-mct/monitor-ui 2.7.1 → 2.8.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [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)
+
+
+### Bug Fixes
+
+* **fields:** handle detached click outside for time in DatePicker & DateRangePicker ([afa0a13](https://github.com/MTES-MCT/monitor-ui/commit/afa0a13394f650b0d26a5cf868a325cc79335dcb))
+
 # [2.7.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.6.0...v2.7.0) (2023-01-12)
 
 

package/index.js

@@ -1955,9 +1955,9 @@ const Dropdown = Object.assign(RawDropdown, {
 });
 
 const ICON_SIZE = {
-    [Size.LARGE]: 1.25,
-    [Size.NORMAL]: 1.25,
-    [Size.SMALL]: 0.75
+    [Size.LARGE]: 20,
+    [Size.NORMAL]: 20,
+    [Size.SMALL]: 12
 };
 function Button({ accent = Accent.PRIMARY, children, Icon, isFullWidth = false, size = Size.NORMAL, type = 'button', ...nativeProps }) {
     const commonChildren = useMemo(() => (jsxs(Fragment, { children: [Icon && jsx(Icon, { size: ICON_SIZE[size] }), children] })), [children, Icon, size]);
@@ -3440,9 +3440,13 @@ dayjs_minExports.tz.setDefault('UTC');
  * `2022-01-02T03:04:05.006Z` => `2022-01-02T03:04:05.006+01:00` (or `+02:00` during DST) in Europe/Paris timezone.
  */
 function getLocalizedDayjs(utcDate) {
+    if (typeof utcDate === 'string') {
+        return dayjs_minExports(utcDate);
+    }
+    const utcDateAsDate = dayjs_minExports(utcDate).toDate();
     // 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 = utcDateAsDate.getTimezoneOffset();
     return dayjs_minExports(utcDate).add(timezoneOffsetInMinutes, 'minutes');
 }
 
@@ -4463,7 +4467,7 @@ const Box$5 = styled.div `
 
 function DatePicker({ baseContainer, defaultValue, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, 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();
@@ -4481,9 +4485,14 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         if (!onChange || !selectedDateRef.current) {
             return;
         }
-        const nextDate = getUtcizedDayjs(selectedDateRef.current).toDate();
-        onChange(nextDate);
-    }, [onChange]);
+        const nextDateAsDayjs = getUtcizedDayjs(selectedDateRef.current);
+        if (isStringDate) {
+            onChange(nextDateAsDayjs.toISOString());
+        }
+        else {
+            onChange(nextDateAsDayjs.toDate());
+        }
+    }, [isStringDate, onChange]);
     const closeCalendarPicker = useCallback(() => {
         isCalendarPickerOpenRef.current = false;
         forceUpdate();
@@ -4769,7 +4778,7 @@ var DateRangePosition;
 
 function DateRangePicker({ baseContainer, defaultValue, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, 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();
@@ -4794,11 +4803,19 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         if (!onChange || !selectedStartDateRef.current || !selectedEndDateRef.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(selectedStartDateRef.current).toISOString();
+            const utcizedEndDateAsString = getUtcizedDayjs(selectedEndDateRef.current).toISOString();
+            const nextDateAsStringRange = [utcizedStartDateAsString, utcizedEndDateAsString];
+            onChange(nextDateAsStringRange);
+        }
+        else {
+            const utcizedStartDate = getUtcizedDayjs(selectedStartDateRef.current).toDate();
+            const utcizedEndDate = getUtcizedDayjs(selectedEndDateRef.current).toDate();
+            const nextDateRange = [utcizedStartDate, utcizedEndDate];
+            onChange(nextDateRange);
+        }
+    }, [isStringDate, onChange]);
     const closeRangeCalendarPicker = useCallback(() => {
         isRangeCalendarPickerOpenRef.current = false;
         forceUpdate();
@@ -5335,18 +5352,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 }) {