@mtes-mct/monitor-ui 14.2.0 → 14.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [14.2.0](https://github.com/MTES-MCT/monitor-ui/compare/v14.1.0...v14.2.0) (2024-04-18)
+
+
+### Features
+
+* **icons:** add new icons ([887c14e](https://github.com/MTES-MCT/monitor-ui/commit/887c14ee4c8246131f21f89d9391d9c010a88d9d))
+
 ## [14.1.0](https://github.com/MTES-MCT/monitor-ui/compare/v14.0.0...v14.1.0) (2024-04-17)
 
 

package/components/Banner/index.d.ts

@@ -2,13 +2,16 @@ import { type ReactNode } from 'react';
 import { Level } from '../../constants';
 export type BannerProps = {
     children: string | ReactNode;
+    className?: string | undefined;
+    closingDelay?: number;
     isClosable: boolean;
     isCollapsible: boolean;
     isHiddenByDefault: boolean | undefined;
     level: Level;
     top: string;
+    withAutomaticClosing?: boolean;
 };
-declare function Banner({ children, isClosable, isCollapsible, isHiddenByDefault, level, top }: Readonly<BannerProps>): import("react/jsx-runtime").JSX.Element;
+declare function Banner({ children, className, closingDelay, isClosable, isCollapsible, isHiddenByDefault, level, top, withAutomaticClosing }: Readonly<BannerProps>): import("react/jsx-runtime").JSX.Element;
 declare namespace Banner {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAIhD,OAAO,EAAgB,KAAK,EAAQ,MAAM,iBAAiB,CAAA;AAE3D,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,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;CACZ,CAAA;AA6CD,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,iBAAiB,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,CAAC,WAAW,CAAC,2CAwD5G;kBAxDQ,MAAM;;;AA4Df,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,2CAsEvB;kBAhFQ,MAAM;;;AAwHf,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/index.js

@@ -53748,36 +53748,9 @@ const getBannerPalette = (level)=>{
     };
 };
 
-const Wrapper = styled.div`
-  display: ${(p)=>p.$isHidden ? 'none' : 'flex'};
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  position: absolute;
-  background-color: ${(p)=>getBannerPalette(p.$level).backgroundColor};
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  padding: 0 2rem;
-  top: ${(p)=>`${p.$top}`};
-  z-index: 1000;
-  height: ${(p)=>!p.$isHidden && p.$isCollapsed ? '10px' : '50px'};
-  border-bottom: ${({ $isCollapsible, $level })=>$isCollapsible ? `4px solid ${getBannerPalette($level).borderColor}` : 'none'};
-  box-shadow: ${({ $isCollapsible })=>$isCollapsible ? 'none' : '0px 3px 4px #7077854D'};
-  transition: height 0.3s ease;
-`;
-const ContentWrapper = styled.div`
-  color: ${(p)=>getBannerPalette(p.$level).color};
-  align-self: center;
-  flex-grow: 2;
-  text-align: center;
-  font-size: 16px;
-  font-weight: 500;
-`;
-const ButtonWrapper = styled.div`
-  align-self: center;
-`;
-function Banner({ children, isClosable, isCollapsible, isHiddenByDefault, level, top }) {
+function Banner({ children, className = undefined, closingDelay = 3000, isClosable, isCollapsible, isHiddenByDefault, level, top, withAutomaticClosing = false }) {
+    const timeoutIdRef = useRef(undefined);
+    const controlledClassName = classnames('Component-Banner', className);
     const [isHidden, setIsHidden] = useState(!!isHiddenByDefault);
     const [isCollapsed, setIsCollapsed] = useState(false);
     const [isCollapsing, setIsCollapsing] = useState(false);
@@ -53793,7 +53766,7 @@ function Banner({ children, isClosable, isCollapsible, isHiddenByDefault, level,
             setIsCollapsed(true);
         }
     };
-    const onClickAction = ()=>{
+    const onClickAction = useCallback(()=>{
         if (isClosable) {
             setIsHidden(true);
         } else if (isCollapsible) {
@@ -53801,14 +53774,30 @@ function Banner({ children, isClosable, isCollapsible, isHiddenByDefault, level,
             setIsCollapsed(true);
             setHasCollapsed(true);
         }
-    };
+    }, [
+        isClosable,
+        isCollapsible
+    ]);
+    useEffect(()=>{
+        if (withAutomaticClosing) {
+            const timeoutId = setTimeout(()=>{
+                onClickAction();
+            }, closingDelay);
+            timeoutIdRef.current = timeoutId;
+        }
+        return ()=>clearTimeout(timeoutIdRef.current);
+    }, [
+        closingDelay,
+        onClickAction,
+        withAutomaticClosing
+    ]);
     return /*#__PURE__*/ jsx(Wrapper, {
         $isCollapsed: isCollapsed,
         $isCollapsible: isCollapsible,
         $isHidden: isHidden,
         $level: level,
         $top: top,
-        className: "banner",
+        className: controlledClassName,
         onMouseEnter: enterHover,
         onMouseLeave: leaveHover,
         children: !isHidden && !isCollapsed && /*#__PURE__*/ jsxs(Fragment, {
@@ -53841,6 +53830,35 @@ function Banner({ children, isClosable, isCollapsible, isHiddenByDefault, level,
         })
     });
 }
+const Wrapper = styled.div`
+  display: ${(p)=>p.$isHidden ? 'none' : 'flex'};
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  background-color: ${(p)=>getBannerPalette(p.$level).backgroundColor};
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  padding: 0 2rem;
+  top: ${(p)=>`${p.$top}`};
+  z-index: 1000;
+  height: ${(p)=>!p.$isHidden && p.$isCollapsed ? '10px' : '50px'};
+  border-bottom: ${({ $isCollapsible, $level })=>$isCollapsible ? `4px solid ${getBannerPalette($level).borderColor}` : 'none'};
+  box-shadow: ${({ $isCollapsible })=>$isCollapsible ? 'none' : '0px 3px 4px #7077854D'};
+  transition: height 0.3s ease;
+`;
+const ContentWrapper = styled.div`
+  color: ${(p)=>getBannerPalette(p.$level).color};
+  align-self: center;
+  flex-grow: 2;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 500;
+`;
+const ButtonWrapper = styled.div`
+  align-self: center;
+`;
 Banner.displayName = 'Banner';
 
 const Field$2 = styled.div.attrs((props)=>({

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.2.0",
+  "version": "14.3.0",
   "license": "AGPL-3.0",
   "type": "module",
   "engines": {