@mtes-mct/monitor-ui 2.9.2 → 2.9.4

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [2.9.3](https://github.com/MTES-MCT/monitor-ui/compare/v2.9.2...v2.9.3) (2023-01-27)
+
+
+### Bug Fixes
+
+* **components:** use px instead of rem for Dropdown icon size ([c0b24ac](https://github.com/MTES-MCT/monitor-ui/commit/c0b24ac4c90f666bbdeeae533c3d6153088a80eb))
+
+## [2.9.2](https://github.com/MTES-MCT/monitor-ui/compare/v2.9.1...v2.9.2) (2023-01-27)
+
+
+### Bug Fixes
+
+* **fields:** set MutliSelect initial isOpen to false ([06fc475](https://github.com/MTES-MCT/monitor-ui/commit/06fc475fcd41e00e5e79a5636ba0e720899e3a1f))
+
 ## [2.9.1](https://github.com/MTES-MCT/monitor-ui/compare/v2.9.0...v2.9.1) (2023-01-27)
 
 

package/index.js

@@ -1877,7 +1877,7 @@ function ThemeProvider({ children, theme = {} }) {
 }
 
 function Item({ Icon, ...originalProps }) {
-    const icon = useMemo(() => (Icon ? jsx(Icon, { size: 1.25 }) : undefined), [Icon]);
+    const icon = useMemo(() => (Icon ? jsx(Icon, { size: 20 }) : undefined), [Icon]);
     const hasIcon = useMemo(() => Boolean(Icon), [Icon]);
     return jsx(StyledDropdownItem, { "$hasIcon": hasIcon, icon: icon, ...originalProps });
 }
@@ -1888,15 +1888,20 @@ const StyledDropdownItem = styled(Dropdown$1.Item) `
   font-size: 13px;
   line-height: 1;
   padding: 12px;
-  padding: ${p => (p.$hasIcon ? '9px' : '12.5px')} 12px;
+  padding: ${p => (p.$hasIcon ? '7px' : '11px')} 12px ${p => (p.$hasIcon ? '9px' : '14px')};
 
   &:not(:last-child) {
     border-bottom: 1px solid var(--lightGray);
   }
+
+  /* SVG Icon Components are wrapped within a <div /> */
+  > div {
+    margin-top: 1px;
+  }
 `;
 
 function RawDropdown({ Icon, ...originalProps }) {
-    const icon = useMemo(() => (Icon ? jsx(Icon, { size: 1.25 }) : undefined), [Icon]);
+    const icon = useMemo(() => (Icon ? jsx(Icon, { size: 20 }) : undefined), [Icon]);
     const hasIcon = useMemo(() => Boolean(Icon), [Icon]);
     return jsx(StyledDropdown, { "$hasIcon": hasIcon, icon: icon, ...originalProps });
 }
@@ -1909,7 +1914,7 @@ const StyledDropdown = styled(Dropdown$1) `
     color: ${p => p.theme.color.gainsboro};
     display: flex;
     font-size: 13px;
-    padding: ${p => (p.$hasIcon ? '5px' : '6px')} 12px;
+    padding: ${p => (p.$hasIcon ? '4px' : '5px')} 12px ${p => (p.$hasIcon ? '5px' : '7px')};
 
     :hover {
       background-color: ${p => p.theme.color.blueYonder['100']};
@@ -1931,7 +1936,7 @@ const StyledDropdown = styled(Dropdown$1) `
 
     /* SVG Icon Components are wrapped within a <div /> */
     > div {
-      margin-right: 8px;
+      margin: 1px 8px 0 0;
     }
 
     > svg {
@@ -2116,6 +2121,7 @@ const StyledField = styled(Field$2) `
 const Box$b = styled.div `
   background-color: ${p => (p.$isLight ? p.theme.color.white : 'transparent')};
   padding: ${p => (p.$hasBorder || p.$isLight ? '16px' : 0)};
+  width: 100%;
 
   ${p => p.$hasBorder &&
     css `
@@ -5086,12 +5092,11 @@ const Box$1 = styled.div `
         > .rs-stack-item {
           > .rs-picker-toggle-placeholder {
             font-size: 13px;
-            line-height: 1.3846;
+            line-height: 1.5385; // = 20px
           }
 
           > svg {
             height: 18px;
-            /* margin-top: -2px; */
           }
         }
       }
@@ -5224,9 +5229,7 @@ function MultiZoneEditor({ addButtonLabel, defaultValue = [], initialZone, isLab
     }, [defaultValue]);
     return (jsxs(Fieldset, { isHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(Button, { accent: Accent.SECONDARY, Icon: Plus, isFullWidth: true, onClick: addZone, children: addButtonLabel }), jsx(Fragment, { children: zones.map((zone, index) => (
                 // eslint-disable-next-line react/no-array-index-key
-                jsxs(Row, { children: [jsxs(ZoneWrapper, { children: [zone[labelPropName], jsxs("a", { onClick: () => centerZone(zone), style: {
-                                        cursor: 'pointer'
-                                    }, children: [jsx(SelectRectangle, {}), " Centrer sur la carte"] })] }), jsx(IconButton, { accent: Accent.SECONDARY, Icon: Edit, onClick: () => editZone(index, zone) }), jsx(IconButton, { accent: Accent.SECONDARY, "aria-label": "Supprimer cette zone", Icon: Delete, onClick: () => deleteZone(index) })] }, `zone-${index}`))) })] }));
+                jsxs(Row, { children: [jsxs(ZoneWrapper, { children: [zone[labelPropName], jsxs(Link, { onClick: () => centerZone(zone), children: [jsx(SelectRectangle, {}), jsx("span", { children: "Centrer sur la carte" })] })] }), jsx(IconButton, { accent: Accent.SECONDARY, Icon: Edit, onClick: () => editZone(index, zone) }), jsx(IconButton, { accent: Accent.SECONDARY, "aria-label": "Supprimer cette zone", Icon: Delete, onClick: () => deleteZone(index) })] }, `zone-${index}`))) })] }));
 }
 const Row = styled.div `
   align-items: center;
@@ -5242,10 +5245,20 @@ const ZoneWrapper = styled.div `
   display: flex;
   flex-grow: 1;
   font-size: 13px;
-  line-height: 1.5;
+  line-height: 1.3077; // = 17px
   justify-content: space-between;
   padding: 6px 12px 6px;
 `;
+const Link = styled.a `
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+
+  > span {
+    line-height: 1;
+    margin: -2px 0 0 8px;
+  }
+`;
 
 function NumberInput({ isLabelHidden = false, isLight = false, label, onChange, ...originalProps }) {
     const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);