@mtes-mct/monitor-ui 6.1.0 → 6.2.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [6.1.1](https://github.com/MTES-MCT/monitor-ui/compare/v6.1.0...v6.1.1) (2023-05-21)
+
+
+### Bug Fixes
+
+* **formiks:** show error when touched ([f554973](https://github.com/MTES-MCT/monitor-ui/commit/f554973c68901406b08e3adbe37fc49a1407580b))
+
+# [6.1.0](https://github.com/MTES-MCT/monitor-ui/compare/v6.0.1...v6.1.0) (2023-05-19)
+
+
+### Bug Fixes
+
+* **fields:** delete queryMap and queryUrl props ([5e00cb0](https://github.com/MTES-MCT/monitor-ui/commit/5e00cb0baa8dc6937b44a800e24f61d04a258ab7))
+
+
+### Features
+
+* **fields:** add Icon prop to TextInput ([a885011](https://github.com/MTES-MCT/monitor-ui/commit/a885011f2cd0d09034e9d45a54a356b4ffdd7d6c))
+* **icons:** update and add icons ([efd44f2](https://github.com/MTES-MCT/monitor-ui/commit/efd44f243fa2f2914b1c15a755245c99f2c06a76))
+
 ## [6.0.1](https://github.com/MTES-MCT/monitor-ui/compare/v6.0.0...v6.0.1) (2023-05-19)
 
 

package/elements/Button.d.ts

@@ -1,14 +1,16 @@
+import { type ButtonHTMLAttributes, type FunctionComponent } from 'react';
 import { Accent, Size } from '../constants';
-import type { IconProps } from '../types';
-import type { ButtonHTMLAttributes, FunctionComponent } from 'react';
+import { type IconProps } from '../types';
 export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
     Icon?: FunctionComponent<IconProps> | undefined;
     accent?: Accent | undefined;
     children?: string | undefined;
     isFullWidth?: boolean | undefined;
     size?: Size | undefined;
+    /** Prevent onClick event propagation. */
+    withUnpropagatedClick?: boolean | undefined;
 };
-export declare function Button({ accent, children, className, Icon, isFullWidth, size, type, ...nativeProps }: ButtonProps): JSX.Element;
+export declare function Button({ accent, children, className, Icon, isFullWidth, onClick, size, type, withUnpropagatedClick, ...nativeProps }: ButtonProps): JSX.Element;
 export declare const PrimaryButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const SecondaryButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const TertiaryButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;

package/elements/IconButton.d.ts

@@ -1,12 +1,14 @@
+import { type ButtonHTMLAttributes, type FunctionComponent } from 'react';
 import { Accent, Size } from '../constants';
-import type { IconProps } from '../types';
-import type { ButtonHTMLAttributes, FunctionComponent } from 'react';
+import { type IconProps } from '../types';
 export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
     Icon: FunctionComponent<IconProps>;
     accent?: Accent | undefined;
     color?: string | undefined;
-    /** In pixels, override `size` prop default values */
+    /** In pixels, override `size` prop default values. */
     iconSize?: number | undefined;
     size?: Size | undefined;
+    /** Prevent onClick event propagation. */
+    withUnpropagatedClick?: boolean | undefined;
 };
-export declare function IconButton({ accent, className, color, Icon, iconSize, size, type, ...nativeProps }: IconButtonProps): JSX.Element;
+export declare function IconButton({ accent, className, color, Icon, iconSize, onClick, size, type, withUnpropagatedClick, ...nativeProps }: IconButtonProps): JSX.Element;

package/index.js

@@ -2598,17 +2598,26 @@ const ICON_SIZE = {
     [Size.NORMAL]: 20,
     [Size.SMALL]: 12
 };
-function Button({ accent = Accent.PRIMARY, children, className, Icon, isFullWidth = false, size = Size.NORMAL, type = 'button', ...nativeProps }) {
+function Button({ accent = Accent.PRIMARY, children, className, Icon, isFullWidth = false, onClick, size = Size.NORMAL, type = 'button', withUnpropagatedClick = false, ...nativeProps }) {
+    const handleClick = useCallback((event) => {
+        if (withUnpropagatedClick) {
+            stopMouseEventPropagation(event);
+        }
+        if (onClick) {
+            onClick(event);
+        }
+    }, [onClick, withUnpropagatedClick]);
     const commonChildren = useMemo(() => (jsxs(Fragment, { children: [Icon && jsx(Icon, { size: ICON_SIZE[size] }), children && jsx(ButtonLabel, { children: children })] })), [children, Icon, size]);
     const commonProps = useMemo(() => ({
         as: StyledButton$1,
         children: commonChildren,
         className: classnames('Element-Button', className),
         isFullWidth,
+        onClick: handleClick,
         size,
         type,
         ...nativeProps
-    }), [className, commonChildren, isFullWidth, nativeProps, size, type]);
+    }), [className, commonChildren, handleClick, isFullWidth, nativeProps, size, type]);
     switch (accent) {
         case Accent.SECONDARY:
             return jsx(SecondaryButton, { ...commonProps });
@@ -2734,15 +2743,24 @@ const ICON_SIZE_IN_PX = {
     [Size.NORMAL]: 20,
     [Size.SMALL]: 14
 };
-function IconButton({ accent = Accent.PRIMARY, className, color, Icon, iconSize, size = Size.NORMAL, type = 'button', ...nativeProps }) {
-    const children = useMemo(() => jsx(Icon, { color: color, size: iconSize || ICON_SIZE_IN_PX[size] }), [color, Icon, iconSize, size]);
+function IconButton({ accent = Accent.PRIMARY, className, color, Icon, iconSize, onClick, size = Size.NORMAL, type = 'button', withUnpropagatedClick = false, ...nativeProps }) {
+    const handleClick = useCallback((event) => {
+        if (withUnpropagatedClick) {
+            stopMouseEventPropagation(event);
+        }
+        if (onClick) {
+            onClick(event);
+        }
+    }, [onClick, withUnpropagatedClick]);
+    const commonChildren = useMemo(() => jsx(Icon, { color: color, size: iconSize || ICON_SIZE_IN_PX[size] }), [color, Icon, iconSize, size]);
     const commonProps = useMemo(() => ({
-        children,
+        children: commonChildren,
         className: classnames('Element-IconButton', className),
+        onClick: handleClick,
         size,
         type,
         ...nativeProps
-    }), [children, className, nativeProps, size, type]);
+    }), [className, commonChildren, handleClick, nativeProps, size, type]);
     switch (accent) {
         case Accent.SECONDARY:
             return jsx(SecondaryButton, { as: StyledButton, ...commonProps });
@@ -31804,13 +31822,15 @@ const InputBox = styled.div `
 
 function FormikSearch({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
+    const error = meta.touched ? meta.error : undefined;
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return jsx(Search, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(Search, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikCheckbox({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
+    const error = meta.touched ? meta.error : undefined;
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
@@ -31822,32 +31842,35 @@ function FormikCheckbox({ name, ...originalProps }) {
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(Checkbox, { checked: isChecked, error: meta.error, name: name, onChange: handleChange, ...originalProps });
+    return jsx(Checkbox, { checked: isChecked, error: error, name: name, onChange: handleChange, ...originalProps });
 }
 
 function FormikCoordinatesInput({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
+    const error = meta.touched ? meta.error : undefined;
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => (nextCoordinates) => helpers.setValue(nextCoordinates), []);
-    return jsx(CoordinatesInput, { defaultValue: defaultValue, error: meta.error, onChange: handleChange, ...originalProps });
+    return jsx(CoordinatesInput, { defaultValue: defaultValue, error: error, onChange: handleChange, ...originalProps });
 }
 
 const UntypedDatePicker = DatePicker;
 function FormikDatePicker({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
+    const error = meta.touched ? meta.error : undefined;
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return jsx(UntypedDatePicker, { defaultValue: field.value, error: meta.error, onChange: handleChange, ...originalProps });
+    return jsx(UntypedDatePicker, { defaultValue: field.value, error: error, onChange: handleChange, ...originalProps });
 }
 
 const UntypedDateRangePicker = DateRangePicker;
 function FormikDateRangePicker({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
+    const error = meta.touched ? meta.error : undefined;
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return (jsx(UntypedDateRangePicker, { defaultValue: field.value, error: meta.error, onChange: handleChange, ...originalProps }));
+    return jsx(UntypedDateRangePicker, { defaultValue: field.value, error: error, onChange: handleChange, ...originalProps });
 }
 
 function FormikEffect({ onChange }) {
@@ -31860,58 +31883,65 @@ function FormikEffect({ onChange }) {
 
 function FormikMultiCheckbox({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
+    const error = meta.touched ? meta.error : undefined;
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return jsx(MultiCheckbox, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(MultiCheckbox, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikMultiSelect({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
+    const error = meta.touched ? meta.error : undefined;
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return jsx(MultiSelect, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(MultiSelect, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikMultiRadio({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
+    const error = meta.touched ? meta.error : undefined;
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return jsx(MultiRadio, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(MultiRadio, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikNumberInput({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
+    const error = meta.touched ? meta.error : undefined;
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return jsx(NumberInput, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(NumberInput, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikSelect({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
+    const error = meta.touched ? meta.error : undefined;
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return jsx(Select, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(Select, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikTextarea({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
+    const error = meta.touched ? meta.error : undefined;
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return jsx(Textarea, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(Textarea, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikTextInput({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
+    const error = meta.touched ? meta.error : undefined;
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return jsx(TextInput, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(TextInput, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function useFieldControl(value, onChange, defaultValueWhenUndefined) {