@mtes-mct/monitor-ui 8.1.0 → 8.2.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [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)
+
+
+### Bug Fixes
+
+* **components:** anyify children type in NewWindow ([5a73dfa](https://github.com/MTES-MCT/monitor-ui/commit/5a73dfadb676417f1436245e9824bd1b96761a19))
+* **components:** re-type ToastContainer in Notifier ([b2f8e74](https://github.com/MTES-MCT/monitor-ui/commit/b2f8e747ca1fbfb5fe0a3ba25d2a76f719bcaa58))
+
+
+### Features
+
+* **elements:** add TableWithRowSelection ([93ed01e](https://github.com/MTES-MCT/monitor-ui/commit/93ed01ef5d96644f1ce04a11d59225eb02af69b2))
+* **elements:** use SimpleTable style ([90beafa](https://github.com/MTES-MCT/monitor-ui/commit/90beafa5f3905781a7b59d85389028427713d9b7))
+
 # [8.0.0](https://github.com/MTES-MCT/monitor-ui/compare/v7.6.2...v8.0.0) (2023-07-19)
 
 

package/assets/stylesheets/rsuite-override.css

@@ -259,9 +259,7 @@ label {
   border-width: 0 0 2px;
   -webkit-transform: rotate(0deg) scale(1);
   transform: rotate(0deg) scale(1);
-  width: 8px;
   margin-top: -1px;
-  margin-left: 5px;
 }
 
 .rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::before {
@@ -274,9 +272,7 @@ label {
   border-width: 0 0 2px;
   -webkit-transform: rotate(0deg) scale(1);
   transform: rotate(0deg) scale(1);
-  width: 8px;
   margin-top: 0px;
-  margin-left: 6px;
 }
 
 .rs-checkbox-disabled:not(.rs-checkbox-checked):not(.rs-checkbox-indeterminate)
@@ -303,8 +299,6 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before {
 .rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::after {
   border: solid var(--white);
   border-width: 0 2px 2px 0;
-  margin-top: 3px !important;
-  margin-left: 6px !important;
 }
 
 .checkbox-hidden > div > label > .rs-checkbox-wrapper {

package/index.js

@@ -1,7 +1,7 @@
 import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, css } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import t, { useMemo, PureComponent, forwardRef, useEffect, useReducer, useState, useRef, isValidElement, cloneElement, useLayoutEffect, useCallback, useImperativeHandle, createContext, useContext } from 'react';
-import { Dropdown as Dropdown$1, AutoComplete, Checkbox as Checkbox$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, TagPicker, Radio, Input, SelectPicker } from 'rsuite';
+import { Dropdown as Dropdown$1, Checkbox as Checkbox$1, AutoComplete, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, TagPicker, Radio, Input, SelectPicker } from 'rsuite';
 import ReactDOM from 'react-dom';
 import { useField, useFormikContext } from 'formik';
 import { captureMessage } from '@sentry/react';
@@ -2268,38 +2268,59 @@ const Dialog = Object.assign(RawDialog, {
     Title
 });
 
-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
@@ -3589,6 +3634,12 @@ const SimpleTable = {
     Th: Th$1
 };
 
+function RowCheckbox({ className = '', disabled = false, isChecked = false, isIndeterminate = false, onChange = () => undefined }) {
+    return (jsx(Checkbox$1, { checked: isChecked, className: `${className} cursor-pointer`, disabled: disabled, indeterminate: isIndeterminate, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        onChange: (_, __, event) => onChange(event) }));
+}
+
 const Table = styled(SimpleTable.Table) `
   border-collapse: separate;
   border-spacing: 0 5px;
@@ -3607,10 +3658,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) `
@@ -3618,10 +3671,12 @@ 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,
     Head,
+    RowCheckbox,
     SortContainer,
     Table,
     Td,