@mtes-mct/monitor-ui 2.9.3 → 2.9.5

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [2.9.4](https://github.com/MTES-MCT/monitor-ui/compare/v2.9.3...v2.9.4) (2023-01-27)
+
+
+### Bug Fixes
+
+* **elements:** make Fieldset width 100% of parent width ([63d10c6](https://github.com/MTES-MCT/monitor-ui/commit/63d10c60ab12ebe437ea236ea5cde12fa13fd6ff))
+* **fields:** fix MultiSelect placeholder alignment ([8c335b2](https://github.com/MTES-MCT/monitor-ui/commit/8c335b2d26208f2b7faecc9434ef1e0c201698e3))
+* **fields:** improve MultiZoneEditor alignments ([b7d5784](https://github.com/MTES-MCT/monitor-ui/commit/b7d5784edefba4bf6e294f5cdf6cf27b79c309db))
+
+## [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)
 
 

package/index.js

@@ -2121,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 `
@@ -5091,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; */
           }
         }
       }
@@ -5229,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;
@@ -5247,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]);
@@ -5292,8 +5300,19 @@ searchable = false, ...originalProps }) {
             onChange(normalizedNextValue);
         }
     }, [close, onChange]);
-    const toggle = useCallback(() => {
-        setIsOpen(!isOpen);
+    const toggle = useCallback((event) => {
+        let targetElement = event.target;
+        if (targetElement.tagName === 'path') {
+            if (targetElement.parentElement) {
+                targetElement = targetElement.parentElement;
+            }
+        }
+        if (targetElement.classList.contains('rs-picker-toggle') ||
+            targetElement.classList.contains('rs-stack-item') ||
+            targetElement.classList.contains('rs-picker-toggle-caret') ||
+            targetElement.classList.contains('rs-picker-toggle-placeholder')) {
+            setIsOpen(!isOpen);
+        }
     }, [isOpen]);
     useClickOutside(boxRef, close, baseContainer);
     useEffect(() => {