@mtes-mct/monitor-ui 8.1.1 → 8.3.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [8.2.0](https://github.com/MTES-MCT/monitor-ui/compare/v8.1.1...v8.2.0) (2023-08-10)
+
+
+### Features
+
+* **components:** create primary and secondary accent for dropdown component ([7e29c6a](https://github.com/MTES-MCT/monitor-ui/commit/7e29c6a6d81a610b5a97c2fc4271adfd6504d8f1))
+* **elements:** add buttonsGroup component in TableWithSelectableRows component ([4a144d6](https://github.com/MTES-MCT/monitor-ui/commit/4a144d6571ac365339d89f20e792ea3f72217bf4))
+
+## [8.1.1](https://github.com/MTES-MCT/monitor-ui/compare/v8.1.0...v8.1.1) (2023-08-09)
+
+
+### Bug Fixes
+
+* **elements:** clean RowCheckbox component ([0128e98](https://github.com/MTES-MCT/monitor-ui/commit/0128e98ec19e3a302f696b8e62f33aa949601193))
+* **elements:** update checkbox style for TableWithSelectableRows components ([aa15faa](https://github.com/MTES-MCT/monitor-ui/commit/aa15faae2adb7359d11ad548c23c8c67353505c7))
+
 # [8.1.0](https://github.com/MTES-MCT/monitor-ui/compare/v8.0.0...v8.1.0) (2023-08-07)
 
 

package/index.js

@@ -2188,7 +2188,7 @@ const Action = styled.div `
   }
 `;
 
-const Body = styled.div `
+const Body$1 = styled.div `
   background-color: ${p => p.theme.color.white};
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -2207,7 +2207,7 @@ const Body = styled.div `
   }
 `;
 
-const Title = styled.h4 `
+const Title$1 = styled.h4 `
   font-size: 125%;
   font-weight: 500;
   line-height: 48px;
@@ -2264,42 +2264,63 @@ const Window = styled.div `
 RawDialog.displayName = 'Dialog';
 const Dialog = Object.assign(RawDialog, {
     Action,
-    Body,
-    Title
+    Body: Body$1,
+    Title: Title$1
 });
 
-function Item({ Icon, ...originalProps }) {
+function Item({ accent, Icon, ...originalProps }) {
     const icon = useMemo(() => (Icon ? jsx(Icon, { size: 20 }) : undefined), [Icon]);
     const hasIcon = useMemo(() => Boolean(Icon), [Icon]);
-    return jsx(StyledDropdownItem, { "$hasIcon": hasIcon, icon: icon, ...originalProps });
+    switch (accent) {
+        case Accent.SECONDARY:
+            return jsx(SecondaryDropdownItem, { "$hasIcon": hasIcon, icon: icon, ...originalProps });
+        default:
+            return jsx(PrimaryDropdownItem, { "$hasIcon": hasIcon, icon: icon, ...originalProps });
+    }
 }
 // TODO We need to split that into multiple styled components as done in `<Button />`.
-const StyledDropdownItem = styled(Dropdown$1.Item) `
+const SecondaryDropdownItem = styled(Dropdown$1.Item) `
+  background-color: ${p => p.theme.color.cultured};
+  border: 1px solid ${p => p.theme.color.lightGray};
+  padding: 5px 7px;
+  :hover {
+    background-color: ${p => p.theme.color.cultured};
+    border: 1px solid ${p => p.theme.color.lightGray};
+    color: ${p => p.theme.color.blueYonder['100']};
+  }
+  &:not(:last-child) {
+    margin-bottom: 1px;
+  }
+`;
+const PrimaryDropdownItem = styled(Dropdown$1.Item) `
   align-items: center;
   display: flex;
   font-size: 13px;
   line-height: 1;
-  padding: 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 /> */
+  /* SVG Icon Components are wrapped within a <div />  */
   > div {
     margin-top: 1px;
   }
 `;
 
-function RawDropdown({ className, Icon, ...originalProps }) {
+function RawDropdown({ accent, className, Icon, ...originalProps }) {
     const controlledClassName = classnames('Component-Dropdow', className);
     const icon = useMemo(() => (Icon ? jsx(Icon, { size: 20 }) : undefined), [Icon]);
     const hasIcon = useMemo(() => Boolean(Icon), [Icon]);
-    return jsx(StyledDropdown, { "$hasIcon": hasIcon, className: controlledClassName, icon: icon, ...originalProps });
+    switch (accent) {
+        case Accent.SECONDARY:
+            return jsx(SecondaryDropdown, { "$hasIcon": hasIcon, className: controlledClassName, icon: icon, ...originalProps });
+        default:
+            return jsx(PrimaryDropdown, { "$hasIcon": hasIcon, className: controlledClassName, icon: icon, ...originalProps });
+    }
 }
 // TODO We need to split into multiple styled components as done in `<Button />`.
-const StyledDropdown = styled(Dropdown$1) `
+const PrimaryDropdown = styled(Dropdown$1) `
   .rs-btn {
     align-items: center;
     background-color: ${p => p.theme.color.charcoal};
@@ -2347,6 +2368,30 @@ const StyledDropdown = styled(Dropdown$1) `
     margin-right: 10px;
   }
 `;
+const SecondaryDropdown = styled(Dropdown$1) `
+  .rs-btn {
+    align-items: center;
+    display: flex;
+    padding: ${p => (p.$hasIcon ? '0px ' : '5px 12px 7px')};
+
+    :hover,
+    :active {
+      background-color: transparent;
+      border: none;
+      color: ${p => p.theme.color.blueYonder['100']};
+    }
+
+    > svg {
+      display: none;
+    }
+  }
+
+  > .rs-dropdown-menu {
+    background-color: transparent;
+    border-radius: 0;
+    padding: 0;
+  }
+`;
 RawDropdown.displayName = 'Dropdown';
 const Dropdown = Object.assign(RawDropdown, {
     Item
@@ -3332,27 +3377,35 @@ var index = /*#__PURE__*/Object.freeze({
 	Vms: Vms
 });
 
-function SingleTag({ children, className, onDelete, ...nativeProps }) {
+function SingleTag({ accent = Accent.PRIMARY, children, className, onDelete, ...nativeProps }) {
     const controlledClassName = classnames('Component-SingleTag', className);
     const handleDelete = useCallback(() => {
         if (onDelete) {
             onDelete();
         }
     }, [onDelete]);
-    return (jsxs(Box$g, { className: controlledClassName, ...nativeProps, children: [jsx(Text, { children: children }), jsx(StyledIconButton, { accent: Accent.TERTIARY, Icon: Close, iconSize: 10, onClick: handleDelete })] }));
+    switch (accent) {
+        case Accent.SECONDARY:
+            return (jsxs(Box$g, { className: controlledClassName, ...nativeProps, children: [jsx(SecondaryText, { children: children }), jsx(SecondaryIconButton, { accent: Accent.TERTIARY, Icon: Close, iconSize: 10, onClick: handleDelete })] }));
+        default:
+            return (jsxs(Box$g, { className: controlledClassName, ...nativeProps, children: [jsx(PrimaryText, { children: children }), jsx(PrimaryIconButton, { accent: Accent.TERTIARY, Icon: Close, iconSize: 10, onClick: handleDelete })] }));
+    }
 }
 const Box$g = styled.div `
   align-items: center;
   display: inline-flex;
 `;
-const Text = styled.span `
+const PrimaryText = styled.span `
   background-color: ${p => p.theme.color.lightGray};
   color: ${p => p.theme.color.gunMetal};
   font-size: 13px;
   line-height: 1.3846;
   padding: 3px 8px 5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
-const StyledIconButton = styled(IconButton) `
+const PrimaryIconButton = styled(IconButton) `
   background-color: ${p => p.theme.color.lightGray};
   margin-left: 1px;
   padding: 7px;
@@ -3372,6 +3425,85 @@ const StyledIconButton = styled(IconButton) `
     background-color: ${p => p.theme.color.lightGray};
   }
 `;
+const SecondaryText = styled(PrimaryText) `
+  background-color: ${p => p.theme.color.blueYonder[100]};
+  color: ${p => p.theme.color.white};
+`;
+const SecondaryIconButton = styled(PrimaryIconButton) `
+  background-color: ${p => p.theme.color.blueYonder[100]};
+  color: ${p => p.theme.color.white};
+
+  :hover,
+  &._hover {
+    background-color: ${p => p.theme.color.blueYonder[100]};
+    color: ${p => p.theme.color.blueYonder[25]};
+  }
+
+  :active,
+  &._active {
+    background-color: ${p => p.theme.color.blueYonder[100]};
+    color: ${p => p.theme.color.blueYonder[25]};
+  }
+
+  :disabled,
+  &._disabled {
+    background-color: ${p => p.theme.color.blueYonder[100]};
+    color: ${p => p.theme.color.blueYonder[25]};
+  }
+`;
+
+const Container = styled.div `
+  width: 320px;
+  max-height: 520px;
+  margin-right: 6px;
+  background-color: ${p => p.theme.color.white};
+  box-shadow: 0px 3px 6px ${p => p.theme.color.slateGray};
+  position: relative;
+`;
+const Header = styled.div `
+  height: 40px;
+  background-color: ${p => p.theme.color.charcoal};
+  display: flex;
+  justify-content: space-between;
+  padding-right: 4px;
+  padding-left: 10px;
+  align-items: center;
+`;
+const Title = styled.span `
+  font-size: 16px;
+  line-height: 22px;
+  color: ${p => p.theme.color.white};
+`;
+const Body = styled.div `
+  height: calc(100% - 40px);
+  overflow-y: auto;
+  padding: 12px;
+`;
+const VisibilityButton = styled(IconButton) `
+  background-color: ${p => p.theme.color.gainsboro};
+`;
+const CloseButton = styled(IconButton) `
+  color: white;
+`;
+const Footer = styled.div `
+  background: ${p => p.theme.color.white};
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+`;
+const MapMenuModal = {
+    Body,
+    CloseButton,
+    Container,
+    Footer,
+    Header,
+    Title,
+    VisibilityButton
+};
 
 const Field$2 = styled.div.attrs(props => ({
     className: classnames('Element-Field', props.className)
@@ -3613,10 +3745,12 @@ const Th = styled(SimpleTable.Th) `
   border-top: 1px solid ${p => p.theme.color.lightGray};
   border-bottom: 1px solid ${p => p.theme.color.lightGray};
   border-right: none;
+  padding: 2px 10px;
 `;
 const BodyTr = styled(SimpleTable.BodyTr) `
   td:last-child {
     border-right: 1px solid ${p => p.theme.color.lightGray};
+    overflow: visible;
   }
 `;
 const Td = styled(SimpleTable.Td) `
@@ -3624,6 +3758,7 @@ const Td = styled(SimpleTable.Td) `
   border-top: 1px solid ${p => p.theme.color.lightGray};
   border-right: none;
   padding: 4px 10px;
+  border-right: ${p => (p.$hasRightBorder ? `1px solid ${p.theme.color.lightGray}` : '')};
 `;
 const TableWithSelectableRows = {
     BodyTr,
@@ -36426,5 +36561,5 @@ function logSoftError({ context = {}, isSideWindowError = false, message, origin
     }
 }
 
-export { Accent, Button$1 as Button, Checkbox, CoordinatesFormat, CoordinatesInput, CustomSearch, DatePicker, DateRangePicker, Dialog, Dropdown, Field$2 as Field, FieldError, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NewWindow, NewWindowContext, NotificationEvent, Notifier, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SideMenu, SimpleTable, SingleTag, Size, THEME, TableWithSelectableRows, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getPseudoRandomString, getUtcizedDayjs, isNumeric, logSoftError, stopMouseEventPropagation, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
+export { Accent, Button$1 as Button, Checkbox, CoordinatesFormat, CoordinatesInput, CustomSearch, DatePicker, DateRangePicker, Dialog, Dropdown, Field$2 as Field, FieldError, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MapMenuModal, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NewWindow, NewWindowContext, NotificationEvent, Notifier, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SideMenu, SimpleTable, SingleTag, Size, THEME, TableWithSelectableRows, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getPseudoRandomString, getUtcizedDayjs, isNumeric, logSoftError, stopMouseEventPropagation, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
 //# sourceMappingURL=index.js.map