@mtes-mct/monitor-ui 18.4.0 → 18.4.2

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAExC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAA;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAAK,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,QAAQ,CAAA;AAElE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,MAAM,CAAC,GAAG;IACrE,IAAI,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC5B,CAAA;AA2HD,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CAAC,GAAG;IACxD,IAAI,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CAG1C,CAAA;AAEF,OAAO,EAAE,KAAK,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAExC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAA;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAAK,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,QAAQ,CAAA;AAElE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,MAAM,CAAC,GAAG;IACrE,IAAI,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC5B,CAAA;AAkND,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CAAC,GAAG;IACxD,IAAI,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CAG1C,CAAA;AAEF,OAAO,EAAE,KAAK,iBAAiB,EAAE,CAAA"}

package/fields/shared/StyledInputBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledInputBox.d.ts","sourceRoot":"","sources":["../../../src/fields/shared/StyledInputBox.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAEtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEpD,KAAK,mBAAmB,GAAG,qBAAqB,GAAG;IACjD,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,IAAI,CAAA;CACZ,CAAA;AAaD,eAAO,MAAM,UAAU,gKAoCtB,CAAA;AAED,eAAO,MAAM,cAAc,0HAqB1B,CAAA"}
+{"version":3,"file":"StyledInputBox.d.ts","sourceRoot":"","sources":["../../../src/fields/shared/StyledInputBox.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAEtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEpD,KAAK,mBAAmB,GAAG,qBAAqB,GAAG;IACjD,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,IAAI,CAAA;CACZ,CAAA;AAaD,eAAO,MAAM,UAAU,gKAoCtB,CAAA;AAED,eAAO,MAAM,cAAc,0HAuB1B,CAAA"}

package/index.js

@@ -21780,7 +21780,7 @@ const PrimaryDropdownItem = styled(Dropdown$1.Item)`
   }
 `;
 
-function RawDropdown({ accent, className, Icon, ...originalProps }) {
+function RawDropdown({ accent, className, Icon, title, ...originalProps }) {
     const controlledClassName = classnames('Component-Dropdow', className);
     const icon = useMemo(()=>Icon ? /*#__PURE__*/ jsx(Icon, {
             size: 20
@@ -21791,18 +21791,31 @@ function RawDropdown({ accent, className, Icon, ...originalProps }) {
         Icon
     ]);
     switch(accent){
+        case Accent.TERTIARY:
+            return /*#__PURE__*/ jsx(TertiaryDropdown, {
+                $hasIcon: hasIcon,
+                $hasTitle: !!title,
+                className: controlledClassName,
+                icon: icon,
+                title: title,
+                ...originalProps
+            });
         case Accent.SECONDARY:
             return /*#__PURE__*/ jsx(SecondaryDropdown, {
                 $hasIcon: hasIcon,
+                $hasTitle: !!title,
                 className: controlledClassName,
                 icon: icon,
+                title: title,
                 ...originalProps
             });
         default:
             return /*#__PURE__*/ jsx(PrimaryDropdown, {
                 $hasIcon: hasIcon,
+                $hasTitle: !!title,
                 className: controlledClassName,
                 icon: icon,
+                title: title,
                 ...originalProps
             });
     }
@@ -21817,7 +21830,7 @@ const PrimaryDropdown = styled(Dropdown$1)`
     color: ${(p)=>p.theme.color.gainsboro};
     display: flex;
     font-size: 13px;
-    padding: 3px 12px ${(p)=>p.$hasIcon ? '4px' : '5px'};
+    padding: 3px ${(p)=>p.$hasTitle ? 12 : 6}px ${(p)=>p.$hasIcon ? '4px' : '5px'};
 
     :hover {
       background-color: ${(p)=>p.theme.color.blueYonder};
@@ -21838,7 +21851,7 @@ const PrimaryDropdown = styled(Dropdown$1)`
     }
 
     > .Element-IconBox {
-      margin: 1px 8px 0 0;
+      margin: 1px ${(p)=>p.$hasTitle ? 8 : 0}px 0 0;
     }
 
     > svg {
@@ -21860,7 +21873,7 @@ const SecondaryDropdown = styled(Dropdown$1)`
   .rs-btn {
     align-items: center;
     display: flex;
-    padding: 3px 12px ${(p)=>p.$hasIcon ? '4px' : '5px'};
+    padding: 3px ${(p)=>p.$hasTitle ? 12 : 6}px ${(p)=>p.$hasIcon ? '4px' : '5px'};
 
     border-radius: 0;
     background-color: transparent;
@@ -21889,7 +21902,58 @@ const SecondaryDropdown = styled(Dropdown$1)`
     }
 
     > .Element-IconBox {
-      margin: 1px 8px 0 0;
+      margin: 1px ${(p)=>p.$hasTitle ? 8 : 0}px 0 0;
+    }
+
+    > svg {
+      display: none;
+    }
+  }
+
+  > .rs-dropdown-menu {
+    border-radius: 0;
+    padding: 0;
+  }
+
+  svg.rs-dropdown-item-menu-icon {
+    vertical-align: middle;
+    margin-right: 10px;
+  }
+`;
+const TertiaryDropdown = styled(Dropdown$1)`
+  .rs-btn {
+    align-items: center;
+    display: flex;
+    padding: 3px ${(p)=>p.$hasTitle ? 13 : 7}px ${(p)=>p.$hasIcon ? '4px' : '5px'};
+
+    border-radius: 0;
+    background-color: transparent;
+    border: unset;
+    color: ${(p)=>p.theme.color.charcoal};
+
+    &:hover,
+    &._hover {
+      background-color: ${(p)=>p.theme.color.blueYonder25};
+      border: unset;
+      color: ${(p)=>p.theme.color.blueYonder};
+    }
+
+    &:active,
+    &._active {
+      background-color: ${(p)=>p.theme.color.blueGray25};
+      border: unset;
+      color: ${(p)=>p.theme.color.blueGray};
+    }
+
+    &:disabled,
+    &._disabled {
+      background-color: transparent;
+      border: unset;
+      color: ${(p)=>p.theme.color.lightGray};
+    }
+
+    > .Element-IconBox {
+      margin: 1px ${(p)=>p.$hasTitle ? 8 : 0}px 0 0;
     }
 
     > svg {
@@ -68473,8 +68537,10 @@ const StyledInputBox = styled.div`
 
   > input,
   > .rs-auto-complete > input {
-    padding: ${(p)=>p.$hasIcon ? PADDING_WITH_ICON[p.$size] : PADDING[p.$size]};
     ${inputStyle}
+    padding: ${(p)=>p.$hasIcon ? PADDING_WITH_ICON[p.$size] : PADDING[p.$size]};
+    line-height: 1;
+    flex-grow: 1;
   }
 
   > .Element-IconBox {

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