@mtes-mct/monitor-ui 2.3.0 → 2.3.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.3.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.2.1...v2.3.0) (2022-12-16)
+
+
+### Features
+
+* **fields:** add NumberInput ([#144](https://github.com/MTES-MCT/monitor-ui/issues/144)) ([649cc6c](https://github.com/MTES-MCT/monitor-ui/commit/649cc6cf0c7c1d416c7b6a774472df30d436bf00))
+
 ## [2.2.1](https://github.com/MTES-MCT/monitor-ui/compare/v2.2.0...v2.2.1) (2022-12-15)
 
 

package/config/playwright.config.d.ts

@@ -0,0 +1,3 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+declare const config: PlaywrightTestConfig;
+export default config;

package/e2e/fields.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/index.js

@@ -3028,7 +3028,7 @@ function DateInputWithRef({ defaultValue, isEndDate = false, isForcedFocused, is
         ];
         onChange(nextDateTuple);
     }, [onChange]);
-    return (jsxs(Box$6, { ref: boxSpanRef, "$hasError": hasFormatError || hasValidationError, "$isFocused": isForcedFocused || isFocused, "$isLight": isLight, children: [isStartDate && 'Du ', isEndDate && 'Au ', jsx(NumberInput$1, { ref: dayInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-day`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[2]), max: 31, min: 1, onBack: onBack, onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: () => monthInputRef.current.focus(), onPrevious: onPrevious, size: 2 }), "/", jsx(NumberInput$1, { ref: monthInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-month`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[1]), max: 12, min: 1, onBack: () => dayInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: () => yearInputRef.current.focus(), onPrevious: () => dayInputRef.current.focus(), size: 2 }), "/", jsx(NumberInput$1, { ref: yearInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-year`, defaultValue: defaultValue && defaultValue[0], max: currentUtcYear, min: 2020, onBack: () => monthInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => monthInputRef.current.focus(), size: 4 })] }));
+    return (jsxs(Box$6, { ref: boxSpanRef, "$hasError": hasFormatError || hasValidationError, "$isFocused": isForcedFocused || isFocused, "$isLight": isLight, children: [isStartDate && 'Du ', isEndDate && 'Au ', jsx(NumberInput$1, { ref: dayInputRef, "aria-label": `Jour${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[2]), max: 31, min: 1, onBack: onBack, onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: () => monthInputRef.current.focus(), onPrevious: onPrevious, size: 2 }), "/", jsx(NumberInput$1, { ref: monthInputRef, "aria-label": `Mois${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[1]), max: 12, min: 1, onBack: () => dayInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: () => yearInputRef.current.focus(), onPrevious: () => dayInputRef.current.focus(), size: 2 }), "/", jsx(NumberInput$1, { ref: yearInputRef, "aria-label": `Année${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && defaultValue[0], max: currentUtcYear, min: 2020, onBack: () => monthInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => monthInputRef.current.focus(), size: 4 })] }));
 }
 const DateInput = forwardRef(DateInputWithRef);
 const Box$6 = styled.span `
@@ -3764,7 +3764,7 @@ const Option = styled.div `
   }
 `;
 
-function TimeInputWithRef({ defaultValue, isLight, isStartDate = false, minutesRange = 15, onBack, onChange, onFocus, onNext, onPrevious }, ref) {
+function TimeInputWithRef({ defaultValue, isEndDate = false, isLight, isStartDate = false, minutesRange = 15, onBack, onChange, onFocus, onNext, onPrevious }, ref) {
     const boxSpanRef = useRef();
     const hourInputRef = useRef();
     const minuteInputRef = useRef();
@@ -3851,7 +3851,7 @@ function TimeInputWithRef({ defaultValue, isLight, isStartDate = false, minutesR
         const nextTimeTuple = [hourInputRef.current.value, minuteInputRef.current.value];
         onChange(nextTimeTuple);
     }, [closeRangedTimePicker, onChange]);
-    return (jsxs(Box$3, { ref: boxSpanRef, "$hasError": hasFormatError || hasValidationError, "$isFocused": isFocused, "$isLight": isLight, children: [jsxs(Fragment, { children: [jsx(NumberInput$1, { ref: hourInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-hour`, defaultValue: controlledDefaultValue && controlledDefaultValue[0], 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, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-minute`, defaultValue: controlledDefaultValue && controlledDefaultValue[1], max: 59, min: 0, onBack: () => hourInputRef.current.focus(), onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => hourInputRef.current.focus(), size: 2 })] }), isRangedTimePickerOpenRef.current && (jsx(RangedTimePicker, { filter: rangedTimePickerFilter, minutesRange: minutesRange, onChange: handleRangedTimePickedChange }))] }));
+    return (jsxs(Box$3, { ref: boxSpanRef, "$hasError": hasFormatError || hasValidationError, "$isFocused": isFocused, "$isLight": isLight, children: [jsxs(Fragment, { children: [jsx(NumberInput$1, { ref: hourInputRef, "aria-label": `Heure${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: controlledDefaultValue && controlledDefaultValue[0], 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], max: 59, min: 0, onBack: () => hourInputRef.current.focus(), onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => hourInputRef.current.focus(), size: 2 })] }), isRangedTimePickerOpenRef.current && (jsx(RangedTimePicker, { filter: rangedTimePickerFilter, minutesRange: minutesRange, onChange: handleRangedTimePickedChange }))] }));
 }
 const TimeInput = forwardRef(TimeInputWithRef);
 const Box$3 = styled.span `
@@ -3877,7 +3877,7 @@ var DateRangePosition;
     DateRangePosition["START"] = "START";
 })(DateRangePosition || (DateRangePosition = {}));
 
-function DateRangePicker({ defaultValue, isHistorical = false, isLabelHidden = false, isLight = false, label, minutesRange = 15, onChange, withTime = false }) {
+function DateRangePicker({ defaultValue, isHistorical = false, isLabelHidden = false, isLight = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
     const startDateInputRef = useRef();
     const startTimeInputRef = useRef();
     const endDateInputRef = useRef();
@@ -4026,7 +4026,7 @@ function DateRangePicker({ defaultValue, isHistorical = false, isLabelHidden = f
             window.document.removeEventListener('click', handleClickOutside);
         };
     }, [handleClickOutside]);
-    return (jsxs(Fieldset, { className: "DateRangePicker", children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsxs(Box$2, { children: [jsx(Field$1, { children: jsx(DateInput, { ref: startDateInputRef, defaultValue: selectedStartDateTupleRef.current, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isStartDate: true, onChange: nextDateTuple => handleDateInputFilled(DateRangePosition.START, nextDateTuple), onClick: openRangeCalendarPicker, onNext: handleStartDateInputNext }) }), withTime && (jsx(Field$1, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, defaultValue: selectedStartTimeTupleRef.current, 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$1, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, defaultValue: selectedEndDateTupleRef.current, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, onBack: handleEndDateInputPrevious, onChange: nextDateTuple => handleDateInputFilled(DateRangePosition.END, nextDateTuple), onClick: openRangeCalendarPicker, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious }) }), withTime && (jsx(Field$1, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, defaultValue: selectedEndTimeTupleRef.current, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onPrevious: () => endDateInputRef.current.focus(true) }) }))] }), isRangeCalendarPickerOpenRef.current && (jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, onChange: handleRangeCalendarPickerChange }))] }));
+    return (jsxs(Fieldset, { ...nativeProps, children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsxs(Box$2, { children: [jsx(Field$1, { children: jsx(DateInput, { ref: startDateInputRef, defaultValue: selectedStartDateTupleRef.current, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isStartDate: true, onChange: nextDateTuple => handleDateInputFilled(DateRangePosition.START, nextDateTuple), onClick: openRangeCalendarPicker, onNext: handleStartDateInputNext }) }), withTime && (jsx(Field$1, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, defaultValue: selectedStartTimeTupleRef.current, 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$1, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, defaultValue: selectedEndDateTupleRef.current, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, onBack: handleEndDateInputPrevious, onChange: nextDateTuple => handleDateInputFilled(DateRangePosition.END, nextDateTuple), onClick: openRangeCalendarPicker, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious }) }), withTime && (jsx(Field$1, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, defaultValue: selectedEndTimeTupleRef.current, isEndDate: true, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onPrevious: () => endDateInputRef.current.focus(true) }) }))] }), isRangeCalendarPickerOpenRef.current && (jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, onChange: handleRangeCalendarPickerChange }))] }));
 }
 const Box$2 = styled.div `
   * {
@@ -4049,44 +4049,18 @@ const Field$1 = styled.span `
 `;
 
 function CalendarPicker({ defaultValue, isHistorical, onChange }) {
-    const boxRef = useRef();
-    const calendarRef = useRef();
-    const [isFirstLoad, setIsFirstLoad] = useState(true);
     const utcTodayAsDayjs = useMemo(() => getUtcDayjs().endOf('day'), []);
     const disabledDate = useMemo(() => (date) => date && isHistorical ? getUtcizedDayjs(date).isAfter(utcTodayAsDayjs) : false, [isHistorical, utcTodayAsDayjs]);
     const handleSelect = useCallback((nextDate) => {
         const nextDateTuple = getDateTupleFromDate(nextDate);
         onChange(nextDateTuple);
     }, [onChange]);
-    useEffect(() => {
-        // We wait for the <Box /> to render so that `boxRef` is defined
-        // and can be used as a container for <RsuiteDateRangePicker />
-        setIsFirstLoad(false);
-    }, []);
-    return (jsxs(Fragment, { children: [jsx(GlobalStyleToHideBodyDialog, {}), jsx(Box$1, { ref: boxRef, onClick: stopMouseEventPropagation, children: !isFirstLoad && (jsx(DatePicker$1, { ref: calendarRef, container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: true, ranges: [], 
+    return (jsxs(Fragment, { children: [jsx(RsuiteCalendarPickerModalGlobalStyle, {}), jsx(Box$1, { children: jsx(DatePicker$1, { className: "AAAAAAAAA", classPrefix: "mui-picker-", disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: true, ranges: [], 
                     // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
-                    value: defaultValue })) })] }));
+                    value: defaultValue }) })] }));
 }
-const GlobalStyleToHideBodyDialog = createGlobalStyle `
-  body > div[role="dialog"].rs-picker-date-menu {
-    display: none;
-  }
-`;
-const Box$1 = styled.div `
-  height: 0;
-  position: relative;
-  top: 0;
-  user-select: none;
-
-  .rs-picker-toggle {
-    display: none;
-  }
-
-  .rs-picker-date-panel {
-    height: 290px;
-  }
-
-  .rs-picker-date-menu {
+const RsuiteCalendarPickerModalGlobalStyle = createGlobalStyle `
+  .rs-mui-picker-date-menu {
     border: solid 1px ${p => p.theme.color.lightGray};
     border-radius: 0;
     margin-top: 4px;
@@ -4173,8 +4147,22 @@ const Box$1 = styled.div `
     }
   }
 `;
+const Box$1 = styled.div `
+  /* height: 0;
+  position: relative;
+  top: 0; */
+  user-select: none;
+
+  .rs-picker-toggle {
+    display: none;
+  }
+
+  .rs-picker-date-panel {
+    height: 290px;
+  }
+`;
 
-function DatePicker({ defaultValue, isHistorical = false, isLabelHidden = false, isLight = false, label, minutesRange = 15, onChange, withTime = false }) {
+function DatePicker({ defaultValue, isHistorical = false, isLabelHidden = false, isLight = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
     const dateInputRef = useRef();
     const timeInputRef = useRef();
     const isCalendarPickerOpenRef = useRef(false);
@@ -4241,6 +4229,9 @@ function DatePicker({ defaultValue, isHistorical = false, isLabelHidden = false,
         closeCalendarPicker();
         forceUpdate();
         submit();
+        if (withTime && !selectedTimeTupleRef.current) {
+            timeInputRef.current.focus();
+        }
     }, [closeCalendarPicker, forceUpdate, submit, withTime]);
     const handleTimeInputFilled = useCallback((nextTimeTuple) => {
         // If a date has already been selected
@@ -4263,7 +4254,7 @@ function DatePicker({ defaultValue, isHistorical = false, isLabelHidden = false,
             window.document.removeEventListener('click', handleClickOutside);
         };
     }, [handleClickOutside]);
-    return (jsxs(Fieldset, { className: "DateRangePicker", children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsxs(Box, { children: [jsx(Field, { children: jsx(DateInput, { ref: dateInputRef, defaultValue: selectedDateTupleRef.current, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputFilled, onClick: openCalendarPicker, onNext: handleDateInputNext }) }), withTime && (jsx(Field, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, defaultValue: selectedTimeTupleRef.current, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onPrevious: () => dateInputRef.current.focus(true) }) }))] }), isCalendarPickerOpenRef.current && (jsx(CalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, onChange: handleCalendarPickerChange }))] }));
+    return (jsxs(Fieldset, { ...nativeProps, children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsxs(Box, { children: [jsx(Field, { children: jsx(DateInput, { ref: dateInputRef, defaultValue: selectedDateTupleRef.current, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputFilled, onClick: openCalendarPicker, onNext: handleDateInputNext }) }), withTime && (jsx(Field, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, defaultValue: selectedTimeTupleRef.current, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onPrevious: () => dateInputRef.current.focus(true) }) }))] }), isCalendarPickerOpenRef.current && (jsx(CalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, onChange: handleCalendarPickerChange }))] }));
 }
 const Box = styled.div `
   * {