@mtes-mct/monitor-ui 6.1.1 → 6.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [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)
 
 

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 });