@mtes-mct/monitor-ui 6.1.1 → 6.2.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [6.2.0](https://github.com/MTES-MCT/monitor-ui/compare/v6.1.1...v6.2.0) (2023-05-21)
+
+
+### Features
+
+* **elements:** add withUnpropagatedClick prop to Button & IconButton ([67943f5](https://github.com/MTES-MCT/monitor-ui/commit/67943f5c2bc9e225a13b0185869fef86bebec069))
+
+## [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 });
@@ -21099,7 +21117,7 @@ function CalendarPicker({ isHistorical, isOpen, onChange, value }) {
     const { forceUpdate } = useForceUpdate();
     const utcTodayAsDayjs = useMemo(() => customDayjs().utc().endOf('day'), []);
     const controlledValue = useMemo(() => (value ? getLocalizedDayjs(value).toDate() : undefined), [value]);
-    const disabledDate = useMemo(() => (date) => date && isHistorical ? getUtcizedDayjs(date).isAfter(utcTodayAsDayjs) : false, [isHistorical, utcTodayAsDayjs]);
+    const shouldDisableDate = useMemo(() => (date) => date && isHistorical ? getUtcizedDayjs(date).isAfter(utcTodayAsDayjs) : false, [isHistorical, utcTodayAsDayjs]);
     const handleSelect = useCallback((nextLocalDate) => {
         // We utcize the date picked by the user
         const nextUtcDateAsDayjs = getUtcizedDayjs(nextLocalDate);
@@ -21111,7 +21129,7 @@ function CalendarPicker({ isHistorical, isOpen, onChange, value }) {
         // and can be used as a container for <RsuiteDatePicker />
         forceUpdate();
     }, [forceUpdate]);
-    return (jsx(Box$b, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DatePicker$1, { container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: isOpen, ranges: [], 
+    return (jsx(Box$b, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DatePicker$1, { container: boxRef.current, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: isOpen, ranges: [], shouldDisableDate: shouldDisableDate, 
             // eslint-disable-next-line no-null/no-null
             value: controlledValue ?? null })) }));
 }
@@ -21857,7 +21875,7 @@ function RangeCalendarPicker({ defaultValue, isHistorical, isOpen, onChange }) {
     const { forceUpdate } = useForceUpdate();
     const controlledValue = useMemo(() => (defaultValue ? sortDates(defaultValue) : undefined), [defaultValue]);
     const utcTodayAsDayjs = useMemo(() => customDayjs().utc().endOf('day'), []);
-    const disabledDate = useMemo(() => (date) => isHistorical ? getUtcizedDayjs(date).isAfter(utcTodayAsDayjs) : false, [isHistorical, utcTodayAsDayjs]);
+    const shouldDisableDate = useMemo(() => (date) => isHistorical ? getUtcizedDayjs(date).isAfter(utcTodayAsDayjs) : false, [isHistorical, utcTodayAsDayjs]);
     const handleSelect = useCallback((nextLocalDate) => {
         // We utcize the date picked by the user
         const nextUtcDate = getUtcizedDayjs(nextLocalDate).toDate();
@@ -21879,7 +21897,7 @@ function RangeCalendarPicker({ defaultValue, isHistorical, isOpen, onChange }) {
         // and can be used as a container for <RsuiteDateRangePicker />
         forceUpdate();
     }, [forceUpdate]);
-    return (jsx(Box$6, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DateRangePicker$1, { container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, onSelect: handleSelect, open: isOpen, ranges: [], 
+    return (jsx(Box$6, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DateRangePicker$1, { container: boxRef.current, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, onSelect: handleSelect, open: isOpen, ranges: [], shouldDisableDate: shouldDisableDate, 
             // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
             // eslint-disable-next-line no-null/no-null
             value: controlledValue ?? null })) }));