@mtes-mct/monitor-ui 6.5.0 → 6.5.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [6.5.0](https://github.com/MTES-MCT/monitor-ui/compare/v6.4.1...v6.5.0) (2023-05-25)
+
+
+### Features
+
+* **cypress:** extend retries to caught errors in fill command ([6ea6839](https://github.com/MTES-MCT/monitor-ui/commit/6ea6839c489b83c3807f5779ece254d9652dc95e))
+
 ## [6.4.1](https://github.com/MTES-MCT/monitor-ui/compare/v6.4.0...v6.4.1) (2023-05-25)
 
 

package/fields/NumberInput.d.ts

@@ -1,4 +1,4 @@
-import type { InputProps } from 'rsuite';
+import { type InputProps } from 'rsuite';
 import type { Promisable } from 'type-fest';
 export type NumberInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | 'onChange' | 'type' | 'value'> & {
     error?: string | undefined;
@@ -11,4 +11,4 @@ export type NumberInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | '
     onChange?: ((nextValue: number | undefined) => Promisable<void>) | undefined;
     value?: number | undefined;
 };
-export declare function NumberInput({ className, error, isErrorMessageHidden, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, style, value, ...originalProps }: NumberInputProps): JSX.Element;
+export declare function NumberInput({ className, error, isErrorMessageHidden, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onBlur, onChange, onFocus, style, value, ...originalProps }: NumberInputProps): JSX.Element;

package/hooks/usePreventWheelEvent.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from 'react';
+export declare function usePreventWheelEvent(inputRef: RefObject<HTMLInputElement | null>): (event: WheelEvent) => void;

package/index.js

@@ -21309,26 +21309,58 @@ const Box$b = styled.div `
   }
 `;
 
-function NumberInputWithRef({ isLight, max, min, onBack, onClick, onFilled, onFocus, onFormatError, onInput, onNext, onPrevious, size, value, ...nativeProps }, ref) {
+function usePreventWheelEvent(inputRef) {
+    /**
+     * Prevent any wheel event from emitting while allowing page scroll when focused.
+     *
+     * @description
+     * We want to prevent the number input from changing when the user accidentally scrolls up or down.
+     * That's why we prevent the default behavior of wheel events when it is focused.
+     *
+     * We also want to allow the user to be able to scroll the page while focused on a number input,
+     * That's why we blur this input when a "wheel" (=> "scroll") event happens.
+     *
+     * Because React uses passive event handler by default,
+     * we can't just call `preventDefault` in the `onWheel` event target.
+     * We thus have to use the input reference and add our event handler manually.
+     *
+     * @see https://github.com/facebook/react/pull/19654
+     */
+    const preventWheelEvent = useCallback((event) => {
+        if (!inputRef.current) {
+            return;
+        }
+        event.preventDefault();
+        inputRef.current.blur();
+    }, 
+    // We don't want to pass a reference as a hook dependency since it can't shallow-equal and `.current` is a pointer.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    return preventWheelEvent;
+}
+
+function NumberInputWithRef({ isLight, max, min, onBack, onBlur, 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]);
     useImperativeHandle(ref, () => inputRef.current);
-    const handleClick = useCallback((event) => {
-        // event.stopPropagation()
-        if (onClick) {
-            onClick(event);
+    const preventWheelEvent = usePreventWheelEvent(inputRef);
+    const handleBlur = useCallback((event) => {
+        event.target.removeEventListener('wheel', preventWheelEvent);
+        if (onBlur) {
+            onBlur(event);
         }
-    }, [onClick]);
+    }, [onBlur, preventWheelEvent]);
     const handleFocus = useCallback((event) => {
         if (!inputRef.current) {
             return;
         }
+        event.target.addEventListener('wheel', preventWheelEvent);
         inputRef.current.select();
         if (onFocus) {
             onFocus(event);
         }
-    }, [onFocus]);
+    }, [onFocus, preventWheelEvent]);
     const handleInput = useCallback(() => {
         if (!inputRef.current) {
             return;
@@ -21376,7 +21408,7 @@ function NumberInputWithRef({ isLight, max, min, onBack, onClick, onFilled, onFo
             onBack();
         }
     }, [onBack, onNext, onPrevious]);
-    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)));
+    return (jsx(StyledNumberInput, { ref: inputRef, "$isLight": isLight, "$size": size, defaultValue: value, maxLength: size, onBlur: handleBlur, onFocus: handleFocus, onInput: handleInput, onKeyDown: handleKeyDown, pattern: "\\d*", placeholder: placeholder, type: "text", ...nativeProps }, String(value)));
 }
 const NumberInput$1 = forwardRef(NumberInputWithRef);
 const StyledNumberInput = styled.input `
@@ -26015,11 +26047,14 @@ const Link = styled.a `
   }
 `;
 
-function NumberInput({ className, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, style, value, ...originalProps }) {
+function NumberInput({ className, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onBlur, onChange, onFocus, style, value, ...originalProps }) {
+    // eslint-disable-next-line no-null/no-null
+    const inputRef = useRef(null);
     const controlledClassname = useMemo(() => classnames('Field-NumberInput', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useKey([originalProps.disabled, originalProps.name]);
+    const preventWheelEvent = usePreventWheelEvent(inputRef);
     const handleChange = useCallback((nextValue) => {
         if (!onChange) {
             return;
@@ -26029,8 +26064,20 @@ function NumberInput({ className, error, isErrorMessageHidden = false, isLabelHi
         const normalizedNextValue = !Number.isNaN(nextValueAsNumber) ? nextValueAsNumber : undefined;
         onChange(normalizedNextValue);
     }, [onChange]);
+    const handleBlur = useCallback((event) => {
+        event.target.removeEventListener('wheel', preventWheelEvent);
+        if (onBlur) {
+            onBlur(event);
+        }
+    }, [onBlur, preventWheelEvent]);
+    const handleFocus = useCallback((event) => {
+        event.target.addEventListener('wheel', preventWheelEvent);
+        if (onFocus) {
+            onFocus(event);
+        }
+    }, [onFocus, preventWheelEvent]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && originalProps.disabled, onChange);
-    return (jsxs(Field$2, { className: controlledClassname, style: style, children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$2, { "$hasError": hasError, "$isLight": isLight, id: originalProps.name, onChange: handleChange, type: "number", value: value || '', ...originalProps }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { className: controlledClassname, style: style, children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$2, { ref: inputRef, "$hasError": hasError, "$isLight": isLight, id: originalProps.name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, type: "number", value: value || '', ...originalProps }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledInput$2 = styled(Input) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};