@mtes-mct/monitor-ui 14.3.0 → 15.0.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [14.3.1](https://github.com/MTES-MCT/monitor-ui/compare/v14.3.0...v14.3.1) (2024-04-22)
+
+
+### Bug Fixes
+
+* **component:** display hide text in red when level isError in banner component ([1e10ef2](https://github.com/MTES-MCT/monitor-ui/commit/1e10ef2ea7fd0b1e7d07ef616980306aee416099))
+
+## [14.3.0](https://github.com/MTES-MCT/monitor-ui/compare/v14.2.0...v14.3.0) (2024-04-19)
+
+
+### Features
+
+* **components:** add automatic closing ([759c131](https://github.com/MTES-MCT/monitor-ui/commit/759c13101f048ecd7745480d775c6953d2a31229))
+
 ## [14.2.0](https://github.com/MTES-MCT/monitor-ui/compare/v14.1.0...v14.2.0) (2024-04-18)
 
 

package/components/Banner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAA;AAIhF,OAAO,EAAgB,KAAK,EAAQ,MAAM,iBAAiB,CAAA;AAE3D,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;IACtB,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAA;IACtC,KAAK,EAAE,KAAK,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;IACX,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,CAAA;AAUD,iBAAS,MAAM,CAAC,EACd,QAAQ,EACR,SAAqB,EACrB,YAAmB,EACnB,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,KAAK,EACL,GAAG,EACH,oBAA4B,EAC7B,EAAE,QAAQ,CAAC,WAAW,CAAC,2CAsEvB;kBAhFQ,MAAM;;;AAwHf,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAA;AAIhF,OAAO,EAAgB,KAAK,EAAQ,MAAM,iBAAiB,CAAA;AAE3D,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;IACtB,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAA;IACtC,KAAK,EAAE,KAAK,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;IACX,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,CAAA;AAUD,iBAAS,MAAM,CAAC,EACd,QAAQ,EACR,SAAqB,EACrB,YAAmB,EACnB,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,KAAK,EACL,GAAG,EACH,oBAA4B,EAC7B,EAAE,QAAQ,CAAC,WAAW,CAAC,2CA0EvB;kBApFQ,MAAM;;;AAoIf,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/components/Message/constants.d.ts

@@ -0,0 +1,6 @@
+import { Level } from '../../constants';
+import type { IconProps } from '@types_/definitions';
+import type { FunctionComponent } from 'react';
+export declare const DEFAULT_ICON_COLOR: Record<Level, string>;
+export declare const DEFAUT_ICON: Record<Level, FunctionComponent<IconProps>>;
+//# sourceMappingURL=constants.d.ts.map

package/components/Message/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Message/constants.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAGvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAG9C,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAKpD,CAAA;AAGD,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAKnE,CAAA"}

package/components/Message/index.d.ts

@@ -0,0 +1,11 @@
+import { type FunctionComponent, type HTMLAttributes, type ReactNode } from 'react';
+import { Level } from '../../constants';
+import type { IconProps } from '@types_/definitions';
+export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+    Icon?: FunctionComponent<IconProps> | undefined;
+    children: ReactNode | string;
+    iconColor?: Level | undefined;
+    level?: Level | undefined;
+};
+export declare function Message({ children, Icon, iconColor, level, ...nativeProps }: MessageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/components/Message/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Message/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKnF,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAEpD,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC1D,IAAI,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,GAAG,SAAS,CAAA;IAC/C,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;CAC1B,CAAA;AACD,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,KAAkB,EAAE,GAAG,WAAW,EAAE,EAAE,YAAY,2CAUtG"}

package/components/Message/utils.d.ts

@@ -0,0 +1,7 @@
+import { Level } from '../../constants';
+import { THEME } from '../../theme';
+export declare function getStyledCssFromLevel(): (props: {
+    $level: Level;
+    theme: typeof THEME;
+}) => string;
+//# sourceMappingURL=utils.d.ts.map

package/components/Message/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Message/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAGnC,wBAAgB,qBAAqB,YACpB;IAAE,MAAM,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,YAAY,CAAA;CAAE,YAmCtD"}

package/elements/IconButton.d.ts

@@ -4,6 +4,7 @@ import { type IconProps } from '../types/definitions';
 export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
     Icon: FunctionComponent<IconProps>;
     accent?: Accent | undefined;
+    badge?: string | undefined;
     color?: string | undefined;
     /** In pixels, override `size` prop default values. */
     iconSize?: number | undefined;

package/elements/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/elements/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAA4B,KAAK,oBAAoB,EAAE,KAAK,iBAAiB,EAAe,MAAM,OAAO,CAAA;AAIhH,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAA;AASrD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,GAAG;IACxF,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IAClC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACvB,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC5C,CAAA;AACD,wBAAgB,UAAU,CAAC,EACzB,MAAuB,EACvB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAkB,EAClB,IAAe,EACf,qBAA6B,EAC7B,GAAG,WAAW,EACf,EAAE,eAAe,2CA0CjB"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/elements/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAA4B,KAAK,oBAAoB,EAAE,KAAK,iBAAiB,EAAe,MAAM,OAAO,CAAA;AAIhH,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAA;AASrD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,GAAG;IACxF,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IAClC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACvB,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC5C,CAAA;AACD,wBAAgB,UAAU,CAAC,EACzB,MAAuB,EACvB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAkB,EAClB,IAAe,EACf,qBAA6B,EAC7B,GAAG,WAAW,EACf,EAAE,eAAe,2CA0CjB"}

package/index.js

@@ -53338,54 +53338,34 @@ const PADDING$1 = {
 // We can't use $-prefixed props here for some reason (maybe because the `as` prop exclude them?).
 const StyledButton = styled.button`
   align-items: center;
+  border-width: ${(p)=>p.isCompact ? 0 : 1}px !important;
   display: flex;
   justify-content: center;
   padding: ${(p)=>p.isCompact ? 0 : PADDING$1[p.size]};
-
-  ${(p)=>p.isCompact && css`
-      border: 0;
-
-      :hover,
-      &._hover {
-        border: 0;
-      }
-      border: 0;
-
-      :active,
-      &._active {
-        border: 0;
-      }
-      border: 0;
-
-      :disabled,
-      &._disabled {
-        border: 0;
-      }
-    `}
 `;
 const TertiaryButton = styled.button`
   background-color: transparent;
-  border: ${(p)=>p.isCompact ? 0 : '1px solid transparent'};
+  border-color: transparent;
   color: ${(p)=>p.theme.color.charcoal};
 
-  :hover,
+  &:hover,
   &._hover {
     background-color: transparent;
-    border: ${(p)=>p.isCompact ? 0 : '1px solid transparent'};
+    border-color: transparent;
     color: ${(p)=>p.theme.color.blueYonder};
   }
 
-  :active,
+  &:active,
   &._active {
     background-color: transparent;
-    border: ${(p)=>p.isCompact ? 0 : '1px solid transparent'};
+    border-color: transparent;
     color: ${(p)=>p.theme.color.blueGray};
   }
 
-  :disabled,
+  &:disabled,
   &._disabled {
     background-color: transparent;
-    border: ${(p)=>p.isCompact ? 0 : '1px solid transparent'};
+    border-color: transparent;
     color: ${(p)=>p.theme.color.lightGray};
   }
 `;
@@ -53614,37 +53594,71 @@ const MapMenuDialog = {
     VisibilityButton
 };
 
-function Message({ children, level = Level.WARNING, ...nativeProps }) {
-    switch(level){
-        case Level.WARNING:
-            return /*#__PURE__*/ jsxs(Box$c, {
-                backgroundColor: THEME.color.goldenPoppy25,
-                color: THEME.color.slateGray,
-                ...nativeProps,
-                children: [
-                    /*#__PURE__*/ jsx(AttentionFilled, {
-                        color: THEME.color.goldenPoppy
-                    }),
-                    /*#__PURE__*/ jsx(ChildrenContainer, {
-                        children: children
-                    })
-                ]
-            });
-        default:
-            return /*#__PURE__*/ jsxs(Box$c, {
-                backgroundColor: THEME.color.goldenPoppy25,
-                color: THEME.color.slateGray,
-                ...nativeProps,
-                children: [
-                    /*#__PURE__*/ jsx(AttentionFilled, {
-                        color: THEME.color.goldenPoppy
-                    }),
-                    /*#__PURE__*/ jsx(ChildrenContainer, {
-                        children: children
-                    })
-                ]
-            });
-    }
+// TODO Check default icon color with Adeline.
+const DEFAULT_ICON_COLOR = {
+    [Level.ERROR]: THEME.color.maximumRed,
+    [Level.INFO]: THEME.color.blueGray,
+    [Level.SUCCESS]: THEME.color.mediumSeaGreen,
+    [Level.WARNING]: THEME.color.goldenPoppy
+};
+// TODO Check default icons with Adeline.
+const DEFAUT_ICON = {
+    [Level.ERROR]: AttentionFilled,
+    [Level.INFO]: Info,
+    [Level.SUCCESS]: Check,
+    [Level.WARNING]: AttentionFilled
+};
+
+/* istanbul ignore next */ function getStyledCssFromLevel() {
+    return (props)=>{
+        switch(true){
+            // TODO Check with Adeline.
+            case props.$level === Level.ERROR:
+                return `
+          background-color: ${props.theme.color.maximumRed15};
+          border-color: ${props.theme.color.maximumRed};
+          color: ${props.theme.color.gunMetal};
+        `;
+            // TODO Check with Adeline.
+            case props.$level === Level.SUCCESS:
+                return `
+            background-color: ${props.theme.color.mediumSeaGreen25};
+            border-color: ${props.theme.color.mediumSeaGreen};
+            color: ${props.theme.color.gunMetal};
+          `;
+            case props.$level === Level.WARNING:
+                return `
+          background-color: ${props.theme.color.goldenPoppy25};
+          border-color: ${props.theme.color.goldenPoppy};
+          color: ${props.theme.color.slateGray};
+        `;
+            // TODO Check `border-color` with Adeline.
+            case props.$level === Level.INFO:
+            default:
+                return `
+            background-color: ${props.theme.color.blueGray25};
+            border-color: #BCD9F2;
+            color: ${props.theme.color.gunMetal};
+          `;
+        }
+    };
+}
+
+function Message({ children, Icon, iconColor, level = Level.INFO, ...nativeProps }) {
+    const ControlledIcon = Icon ?? DEFAUT_ICON[level];
+    const controlledIconColor = iconColor ?? DEFAULT_ICON_COLOR[level];
+    return /*#__PURE__*/ jsxs(Box$c, {
+        $level: level,
+        ...nativeProps,
+        children: [
+            /*#__PURE__*/ jsx(ControlledIcon, {
+                color: controlledIconColor
+            }),
+            /*#__PURE__*/ jsx(ChildrenContainer, {
+                children: children
+            })
+        ]
+    });
 }
 const ChildrenContainer = styled.div`
   margin-left: 8px;
@@ -53653,12 +53667,13 @@ const ChildrenContainer = styled.div`
   flex: 1;
 `;
 const Box$c = styled.span`
-  background: ${(p)=>p.backgroundColor ?? p.theme.color.goldenPoppy25};
-  color: ${(p)=>p.color ?? p.theme.color.slateGray};
-  padding: 16px;
-  display: flex;
+  ${getStyledCssFromLevel()}
+
+  border-width: 1px;
   border-radius: 2px;
+  display: flex;
   font-size: 13px;
+  padding: 16px;
 `;
 
 const FONT_SIZE = {
@@ -53822,7 +53837,10 @@ function Banner({ children, className = undefined, closingDelay = 3000, isClosab
                         }),
                         !isClosable && isCollapsible && /*#__PURE__*/ jsx(LinkButton, {
                             size: Size.LARGE,
-                            children: "Masquer"
+                            children: /*#__PURE__*/ jsx(HideText, {
+                                $level: level,
+                                children: "Masquer"
+                            })
                         })
                     ]
                 })
@@ -53859,6 +53877,12 @@ const ContentWrapper = styled.div`
 const ButtonWrapper = styled.div`
   align-self: center;
 `;
+const HideText = styled.span`
+  ${(p)=>p.$level === Level.ERROR ? css`
+          color: ${getBannerPalette(p.$level).color};
+          text-decoration: ${getBannerPalette(p.$level).color} underline;
+        ` : ''}
+`;
 Banner.displayName = 'Banner';
 
 const Field$2 = styled.div.attrs((props)=>({
@@ -68589,6 +68613,7 @@ const StyledRsuiteInput = styled(Input)`
   font-weight: 500;
   padding: 7px 8px;
   width: 100%;
+  min-width: 100%;
   max-width: 100%;
 
   &::placeholder {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mtes-mct/monitor-ui",
   "description": "Common React components, hooks, utilities and CSS stylesheets for MonitorFish, MonitorEnv and RapportNav.",
-  "version": "14.3.0",
+  "version": "15.0.0",
   "license": "AGPL-3.0",
   "type": "module",
   "engines": {

package/components/Message.d.ts

@@ -1,8 +0,0 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
-import { Level } from '../constants';
-export type MessageProps = HTMLAttributes<HTMLDivElement> & {
-    children: ReactNode | string;
-    level?: Level | undefined;
-};
-export declare function Message({ children, level, ...nativeProps }: MessageProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Message.d.ts.map

package/components/Message.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../src/components/Message.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG3D,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAGpC,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC1D,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAA;IAC5B,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;CAC1B,CAAA;AACD,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAqB,EAAE,GAAG,WAAW,EAAE,EAAE,YAAY,2CAkBxF"}