@mtes-mct/monitor-ui 2.9.0 → 2.9.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.9.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.8.1...v2.9.0) (2023-01-25)
+
+
+### Features
+
+* **types:** restrict component props types to handle exact optional prop types ([296acf4](https://github.com/MTES-MCT/monitor-ui/commit/296acf48a7c701f85cbee72ceeea4071d60f0ea6))
+
 ## [2.8.1](https://github.com/MTES-MCT/monitor-ui/compare/v2.8.0...v2.8.1) (2023-01-19)
 
 

package/index.js

@@ -4601,13 +4601,15 @@ function sortDates(dates) {
 function RangeCalendarPicker({ defaultValue, isHistorical, isOpen, onChange }) {
     const boxRef = useRef();
     const selectedFirstDate = useRef();
+    const selectedSecondDate = useRef();
     const { forceUpdate } = useForceUpdate();
     const controlledValue = useMemo(() => (defaultValue ? sortDates(defaultValue) : undefined), [defaultValue]);
     const utcTodayAsDayjs = useMemo(() => getUtcDayjs().endOf('day'), []);
     const disabledDate = useMemo(() => (date) => isHistorical ? getUtcizedDayjs(date).isAfter(utcTodayAsDayjs) : false, [isHistorical, utcTodayAsDayjs]);
     const handleSelect = useCallback((nextDate) => {
-        if (!selectedFirstDate.current) {
+        if (!selectedFirstDate.current || selectedSecondDate.current) {
             selectedFirstDate.current = nextDate;
+            selectedSecondDate.current = undefined;
             return;
         }
         const sortedDateRange = sortDates([selectedFirstDate.current, nextDate]);
@@ -4615,6 +4617,7 @@ function RangeCalendarPicker({ defaultValue, isHistorical, isOpen, onChange }) {
         const startDateTuple = getDateTupleFromDate(startDate);
         const endDateTuple = getDateTupleFromDate(endDate);
         const nextDateTupleRange = [startDateTuple, endDateTuple];
+        selectedSecondDate.current = nextDate;
         onChange(nextDateTupleRange);
     }, [onChange]);
     useEffect(() => {
@@ -4915,9 +4918,8 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         selectedLocalizedEndDateTupleRef.current = nextEndDateTuple;
         selectedLocalizedEndTimeTupleRef.current = getTimeTupleFromDate(selectedLocalizedEndDateRef.current);
         closeRangeCalendarPicker();
-        forceUpdate();
         submit();
-    }, [closeRangeCalendarPicker, forceUpdate, submit, withTime]);
+    }, [closeRangeCalendarPicker, submit, withTime]);
     const handleTimeInputFilled = useCallback((position, nextTimeTuple) => {
         if (position === DateRangePosition.START) {
             // If a start date has already been selected
@@ -5015,16 +5017,16 @@ const ChecboxesBox$1 = styled.div `
     `}
 `;
 
-function MultiSelect({ baseContainer, error, fixedWidth = 5, isLabelHidden = false, isLight = false, label, onChange, options, 
+function MultiSelect({ baseContainer, error, fixedWidth, isLabelHidden = false, isLight = false, label, onChange, options, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 searchable = false, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
-    const [isOpen, setIsOpen] = useState(false);
-    const { forceUpdate } = useForceUpdate();
+    const [isOpen, setIsOpen] = useState(true);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const { forceUpdate } = useForceUpdate();
     const close = useCallback(() => {
         setIsOpen(false);
     }, []);
@@ -5035,46 +5037,51 @@ searchable = false, ...originalProps }) {
         const normalizedNextValue = !nextValue || !nextValue.length ? undefined : nextValue;
         onChange(normalizedNextValue);
     }, [onChange]);
-    const open = useCallback(() => {
-        setIsOpen(true);
-    }, []);
+    const toggle = useCallback((event) => {
+        let targetElement = event.target;
+        if (targetElement.tagName === 'path') {
+            if (targetElement.parentElement) {
+                targetElement = targetElement.parentElement;
+            }
+        }
+        if (targetElement.classList.contains('rs-picker-toggle') ||
+            targetElement.classList.contains('rs-picker-tag-wrapper') ||
+            targetElement.classList.contains('rs-picker-toggle-caret')) {
+            setIsOpen(!isOpen);
+        }
+    }, [isOpen]);
     useClickOutside(boxRef, close, baseContainer);
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { children: [jsx(Label, { hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$1, { ref: boxRef, onClick: open, children: boxRef.current && (jsx(StyledTagPicker, { "$fixedWidth": fixedWidth, "$isLight": isLight, container: boxRef.current, data: options, id: originalProps.name, onChange: handleChange, open: isOpen, searchable: searchable, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { children: [jsx(Label, { hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$1, { ref: boxRef, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current, data: options, id: originalProps.name, onChange: handleChange, onClick: toggle, open: isOpen, searchable: searchable, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
-// TODO A width seems to be mandatory in rsuite which is a very dirty behavior.
-// We should hack that.
-const StyledTagPicker = styled(TagPicker) `
-  border: 0;
-  cursor: pointer;
-  width: ${p => p.$fixedWidth}px;
-
-  > .rs-picker-toggle {
-    background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)} !important;
-    cursor: inherit;
-  }
-`;
 const Box$1 = styled.div `
   position: relative;
+  width: 100%;
 
   > .rs-picker-input {
+    border: solid 1px ${p => (p.$isActive ? p.theme.color.blueGray[100] : p.theme.color.gainsboro)} !important;
+    cursor: pointer;
+    width: 100%;
+
+    :hover {
+      border: solid 1px ${p => p.theme.color.blueYonder[100]} !important;
+    }
+
+    :active,
+    :focus {
+      border: solid 1px ${p => p.theme.color.blueGray[100]} !important;
+    }
+
     > .rs-picker-toggle {
-      border: solid 1px ${p => p.theme.color.gainsboro} !important;
+      background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)} !important;
+      border: 0;
+      cursor: inherit;
       font-size: 13px;
       line-height: 1.3846;
       padding: 5px 40px 5px 8px !important;
 
-      :hover {
-        border: solid 1px ${p => p.theme.color.blueYonder[100]} !important;
-      }
-
-      :active,
-      :focus {
-        border: solid 1px ${p => p.theme.color.blueGray[100]} !important;
-      }
-
       > .rs-stack {
         > .rs-stack-item {
           > .rs-picker-toggle-placeholder {
@@ -5103,6 +5110,29 @@ const Box$1 = styled.div `
       }
     }
   }
+
+  > .rs-picker-menu {
+    > .rs-picker-check-menu {
+      margin: 0;
+
+      > div[role='option'] {
+        > .rs-check-item {
+          > .rs-checkbox-checker {
+            > label {
+              font-size: 13px;
+              line-height: 1.3846;
+              padding: 8px 12px 8px 38px;
+
+              > .rs-checkbox-wrapper {
+                left: 12px;
+                top: 10px !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 `;
 
 function MultiRadio({ defaultValue, isInline = false, isLabelHidden = false, isLight = false, label, name, onChange, options }) {
@@ -5251,20 +5281,20 @@ searchable = false, ...originalProps }) {
         setIsOpen(false);
     }, []);
     const handleChange = useCallback((nextValue) => {
-        if (!onChange) {
-            return;
+        close();
+        if (onChange) {
+            const normalizedNextValue = nextValue ?? undefined;
+            onChange(normalizedNextValue);
         }
-        const normalizedNextValue = nextValue ?? undefined;
-        onChange(normalizedNextValue);
-    }, [onChange]);
-    const open = useCallback(() => {
-        setIsOpen(true);
-    }, []);
+    }, [close, onChange]);
+    const toggle = useCallback(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen]);
     useClickOutside(boxRef, close, baseContainer);
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { children: [jsx(Label, { hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, onClick: open, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, container: boxRef.current, data: options, id: originalProps.name, 
+    return (jsxs(Field$2, { children: [jsx(Label, { hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, onClick: toggle, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, container: boxRef.current, data: options, id: originalProps.name, 
                     // The `unknown` type from Rsuite library is wrong. It should be inferred from `data` prop type.
                     // `onChange: ((value: unknown, event: React.SyntheticEvent<Element, Event>) => void) | undefined`
                     onChange: handleChange, open: isOpen, searchable: searchable, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
@@ -5277,8 +5307,11 @@ const StyledSelectPicker = styled(SelectPicker) `
 `;
 const Box = styled.div `
   position: relative;
+  width: 100%;
 
   > .rs-picker-select {
+    width: 100%;
+
     > .rs-picker-toggle {
       border: solid 1px ${p => p.theme.color.gainsboro} !important;
       font-size: 13px;