@mtes-mct/monitor-ui 16.0.0 → 16.2.0

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## [16.1.0](https://github.com/MTES-MCT/monitor-ui/compare/v16.0.0...v16.1.0) (2024-04-28)
+
+
+### Features
+
+* **components:** add isFixed prop to Banner ([4830f91](https://github.com/MTES-MCT/monitor-ui/commit/4830f913fcde74b6d5c7520423ef5bb46d1b6305))
+* **components:** make isClosable, isCollapsible & isHiddenByDefault Banner props optional ([bbf07db](https://github.com/MTES-MCT/monitor-ui/commit/bbf07db7d7e2054ff37f4c40b439346f47d6363e))
+* **components:** make style prop transparent in Banner ([30beabd](https://github.com/MTES-MCT/monitor-ui/commit/30beabdb52a5119b86fc2efdfdb14223f6223360))
+
+
+### Bug Fixes
+
+* **components:** remove position typo in Banner ([17143e1](https://github.com/MTES-MCT/monitor-ui/commit/17143e1e54004f9b2b7bf863f287c67d7c5b54d7))
+* **elements:** fix non-transparent border in tertiary IconButton ([a4ce7b4](https://github.com/MTES-MCT/monitor-ui/commit/a4ce7b4a7c0dd731e035c0631f3196d06ea9d242))
+
+## [16.0.0](https://github.com/MTES-MCT/monitor-ui/compare/v15.0.1...v16.0.0) (2024-04-28)
+
+
+### ⚠ BREAKING CHANGES
+
+* **entities:** `isEmailSubscriptionContact` & `isSmsSubscriptionContact` props are added to `ControlUnit.ControlUnitContact`.
+
+### Features
+
+* **entities:** add new ControlUnitContact props ([437eb37](https://github.com/MTES-MCT/monitor-ui/commit/437eb37ebd5c5dc531514dcc9bbdafebb87cd987))
+
+
+### Styles
+
+* **components:** specify solid border in Message ([78d2f40](https://github.com/MTES-MCT/monitor-ui/commit/78d2f4001cc67b77694ea8ae3d97167e091c5cd8))
+* **elements:** specify solid border in IconButton ([f7deba3](https://github.com/MTES-MCT/monitor-ui/commit/f7deba3abae79bf9f0de6c289b1999fba93fd1d9))
+
 ## [15.0.1](https://github.com/MTES-MCT/monitor-ui/compare/v15.0.0...v15.0.1) (2024-04-28)
 
 

package/components/Banner/index.d.ts

@@ -1,19 +1,23 @@
 import { type ReactNode } from 'react';
+import { type CSSProperties } from 'styled-components';
 import { Level } from '../../constants';
+import type { Promisable } from 'type-fest';
 export type BannerProps = {
     children: string | ReactNode;
     className?: string | undefined;
     closingDelay?: number;
-    isClosable: boolean;
-    isCollapsible: boolean;
-    isHiddenByDefault: boolean | undefined;
+    isClosable?: boolean | undefined;
+    isCollapsible?: boolean | undefined;
+    isFixed?: boolean | undefined;
+    isHiddenByDefault?: boolean | undefined;
     level: Level;
+    onAutoClose?: (() => Promisable<void>) | undefined;
+    style?: CSSProperties | undefined;
     top: string;
-    withAutomaticClosing?: boolean;
+    withAutomaticClosing?: boolean | undefined;
 };
-declare function Banner({ children, className, closingDelay, isClosable, isCollapsible, isHiddenByDefault, level, top, withAutomaticClosing }: Readonly<BannerProps>): import("react/jsx-runtime").JSX.Element;
-declare namespace Banner {
+export declare function Banner({ children, className, closingDelay, isClosable, isCollapsible, isFixed, isHiddenByDefault, level, onAutoClose, style, top, withAutomaticClosing }: Readonly<BannerProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Banner {
     var displayName: string;
 }
-export { Banner };
 //# sourceMappingURL=index.d.ts.map

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,2CA0EvB;kBApFQ,MAAM;;;AAoIf,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;AAChF,OAAe,EAAO,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAGnE,OAAO,EAAgB,KAAK,EAAQ,MAAM,iBAAiB,CAAA;AAE3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAE3C,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,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAChC,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACvC,KAAK,EAAE,KAAK,CAAA;IACZ,WAAW,CAAC,EAAE,CAAC,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS,CAAA;IAClD,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;IACjC,GAAG,EAAE,MAAM,CAAA;IACX,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC3C,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,SAAqB,EACrB,YAAmB,EACnB,UAAkB,EAClB,aAAqB,EACrB,OAAe,EACf,iBAAyB,EACzB,KAAK,EACL,WAAW,EACX,KAAK,EACL,GAAG,EACH,oBAA4B,EAC7B,EAAE,QAAQ,CAAC,WAAW,CAAC,2CA6EvB;yBA1Fe,MAAM"}

package/index.js

@@ -53338,7 +53338,7 @@ 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: solid ${(p)=>p.isCompact ? 0 : 1}px !important;
+  border: solid ${(p)=>p.isCompact ? 0 : 1}px;
   display: flex;
   justify-content: center;
   padding: ${(p)=>p.isCompact ? 0 : PADDING$1[p.size]};
@@ -53765,7 +53765,7 @@ const getBannerPalette = (level)=>{
     };
 };
 
-function Banner({ children, className = undefined, closingDelay = 3000, isClosable, isCollapsible, isHiddenByDefault, level, top, withAutomaticClosing = false }) {
+function Banner({ children, className = undefined, closingDelay = 3000, isClosable = false, isCollapsible = false, isFixed = false, isHiddenByDefault = false, level, onAutoClose, style, top, withAutomaticClosing = false }) {
     const timeoutIdRef = useRef(undefined);
     const controlledClassName = classnames('Component-Banner', className);
     const [isHidden, setIsHidden] = useState(!!isHiddenByDefault);
@@ -53799,6 +53799,7 @@ function Banner({ children, className = undefined, closingDelay = 3000, isClosab
         if (withAutomaticClosing) {
             const timeoutId = setTimeout(()=>{
                 onClickAction();
+                onAutoClose?.();
             }, closingDelay);
             timeoutIdRef.current = timeoutId;
         }
@@ -53806,17 +53807,20 @@ function Banner({ children, className = undefined, closingDelay = 3000, isClosab
     }, [
         closingDelay,
         onClickAction,
+        onAutoClose,
         withAutomaticClosing
     ]);
     return /*#__PURE__*/ jsx(Wrapper, {
         $isCollapsed: isCollapsed,
         $isCollapsible: isCollapsible,
+        $isFixed: isFixed,
         $isHidden: isHidden,
         $level: level,
         $top: top,
         className: controlledClassName,
         onMouseEnter: enterHover,
         onMouseLeave: leaveHover,
+        style: style,
         children: !isHidden && !isCollapsed && /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(ContentWrapper, {
@@ -53851,30 +53855,31 @@ function Banner({ children, className = undefined, closingDelay = 3000, isClosab
     });
 }
 const Wrapper = styled.div`
+  align-items: center;
+  background-color: ${(p)=>getBannerPalette(p.$level).backgroundColor};
+  border-bottom: ${(p)=>p.$isCollapsible ? `4px solid ${getBannerPalette(p.$level).borderColor}` : 'none'};
+  box-shadow: ${(p)=>p.$isCollapsible ? 'none' : '0px 3px 4px #7077854D'};
   display: ${(p)=>p.$isHidden ? 'none' : 'flex'};
   flex-direction: row;
+  height: ${(p)=>!p.$isHidden && p.$isCollapsed ? '10px' : '50px'};
   justify-content: space-between;
-  align-items: center;
-  position: absolute;
-  background-color: ${(p)=>getBannerPalette(p.$level).backgroundColor};
-  width: 100%;
-  min-width: 100%;
+  left: 0;
   max-width: 100%;
+  min-width: 100%;
   padding: 0 2rem;
+  position: ${(p)=>p.$isFixed ? 'fixed' : 'absolute'};
   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;
+  width: 100%;
+  z-index: 1000;
 `;
 const ContentWrapper = styled.div`
-  color: ${(p)=>getBannerPalette(p.$level).color};
   align-self: center;
+  color: ${(p)=>getBannerPalette(p.$level).color};
   flex-grow: 2;
-  text-align: center;
   font-size: 16px;
   font-weight: 500;
+  text-align: center;
 `;
 const ButtonWrapper = styled.div`
   align-self: center;

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