@mtes-mct/monitor-ui 2.9.1 → 2.9.3

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [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)
+
+
+### Bug Fixes
+
+* **fields:** fix DateRangePicker calendar selection update ([4fb68f8](https://github.com/MTES-MCT/monitor-ui/commit/4fb68f86278094e8fb8255b1f2bf9ce531bbc721))
+* **fields:** fix MultiSelect closing behavior ([1e832e6](https://github.com/MTES-MCT/monitor-ui/commit/1e832e6042cf7734f2084074672ea52220fb9fa8))
+* **fields:** fix Select not closing on selection ([c132a1f](https://github.com/MTES-MCT/monitor-ui/commit/c132a1f153a3e51eb59cf2cfd363e873604efe29))
+* **fields:** make MultiSelect width 100% of parent width ([aa38376](https://github.com/MTES-MCT/monitor-ui/commit/aa38376d0a57961bcdd385165e842b101cd037b1))
+* **fields:** make Select width 100% of parent width ([9aa3f71](https://github.com/MTES-MCT/monitor-ui/commit/9aa3f71f9e258ca66989ef24860dceb4333348b9))
+
 # [2.9.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.8.1...v2.9.0) (2023-01-25)
 
 

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 {
@@ -5022,7 +5027,7 @@ function MultiSelect({ baseContainer, error, fixedWidth, isLabelHidden = false,
 searchable = false, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
-    const [isOpen, setIsOpen] = useState(true);
+    const [isOpen, setIsOpen] = useState(false);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);