cozy-ui 126.6.0 → 127.0.0

package/transpiled/react/ContactsList/Contacts/ContactName.js

@@ -1,35 +1,34 @@
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { getDisplayName } from 'cozy-client/dist/models/contact';
 import Typography from "cozy-ui/transpiled/react/Typography";
 
 var ContactName = function ContactName(_ref) {
-  var displayName = _ref.displayName,
-      familyName = _ref.familyName;
-  var namesToDisplay = displayName && displayName.split(' ') || [];
+  var _contact$name;
+
+  var contact = _ref.contact;
+  var familyName = (_contact$name = contact.name) === null || _contact$name === void 0 ? void 0 : _contact$name.familyName;
+  var displayName = getDisplayName(contact);
+  var namesToDisplay = displayName === null || displayName === void 0 ? void 0 : displayName.split(' ');
   return /*#__PURE__*/React.createElement(Typography, {
     "data-testid": "ContactName" // used by a test in cozy-contacts
     ,
     className: "u-ml-1",
-    variant: "body1",
     noWrap: true,
-    gutterBottom: true,
     display: "inline"
-  }, namesToDisplay.map(function (name, key) {
+  }, namesToDisplay === null || namesToDisplay === void 0 ? void 0 : namesToDisplay.map(function (name, index) {
+    var isLastItem = index === namesToDisplay.length - 1;
     return /*#__PURE__*/React.createElement("span", {
-      key: "display-".concat(key),
+      key: "display-".concat(index),
       className: cx({
         'u-fw-bold': name === familyName
       })
-    }, name, "\xA0");
+    }, name, !isLastItem && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0"));
   }));
 };
 
 ContactName.propTypes = {
-  displayName: PropTypes.string,
-  familyName: PropTypes.string
-};
-ContactName.defaultProps = {
-  displayName: ''
+  contact: PropTypes.object.isRequired
 };
 export default ContactName;

package/transpiled/react/ContactsList/locales/withContactsListLocales.d.ts

@@ -1,2 +1,8 @@
+export namespace locales {
+    export { en };
+    export { fr };
+}
 declare var _default: Component;
 export default _default;
+import en from "./en.json";
+import fr from "./fr.json";

package/transpiled/react/ContactsList/locales/withContactsListLocales.js

@@ -7,7 +7,7 @@ var fr = {
   me: "MOI"
 };
 import withOnlyLocales from "cozy-ui/transpiled/react/providers/I18n/withOnlyLocales";
-var locales = {
+export var locales = {
   en: en,
   fr: fr
 };

package/transpiled/react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.d.ts

@@ -583,6 +583,22 @@ export function makeDarkInvertedOverrides(theme: any): {
     MuiTableHead: {
         root: {
             backgroundColor: any;
+            '&.virtualized': {
+                '& .virtualizedCheckbox': {
+                    opacity: number;
+                    '&.checked': {
+                        opacity: number;
+                    };
+                    '&:hover': {
+                        opacity: number;
+                    };
+                };
+                '&:hover': {
+                    '& .virtualizedCheckbox': {
+                        opacity: number;
+                    };
+                };
+            };
         };
     };
     MuiTableRow: {
@@ -592,6 +608,25 @@ export function makeDarkInvertedOverrides(theme: any): {
                 pointerEvents: string;
                 opacity: number;
             };
+            '&.virtualized': {
+                '& .virtualizedCheckbox': {
+                    opacity: number;
+                    '&.visible': {
+                        opacity: number;
+                    };
+                    '&.checked': {
+                        opacity: number;
+                    };
+                    '&:hover': {
+                        opacity: number;
+                    };
+                };
+                '&:hover': {
+                    '& .virtualizedCheckbox': {
+                        opacity: number;
+                    };
+                };
+            };
         };
     };
     MuiTableCell: {
@@ -601,22 +636,11 @@ export function makeDarkInvertedOverrides(theme: any): {
         head: any;
         body: {
             color: any;
-            '&.sortable': {
-                '&$paddingNone': {
-                    '&$alignLeft': {
-                        paddingLeft: string;
-                    };
-                    '&$alignRight': {
-                        paddingRight: string;
-                    };
-                };
-                '&$alignLeft': {
-                    paddingLeft: string;
-                };
-                '&$alignRight': {
-                    paddingRight: string;
-                };
-            };
+            height: string;
+        };
+        paddingCheckbox: {
+            width: number;
+            padding: number;
         };
         stickyHeader: {
             backgroundColor: any;
@@ -626,11 +650,6 @@ export function makeDarkInvertedOverrides(theme: any): {
         root: {
             padding: string;
             color: any;
-            '&:hover': {
-                color: any;
-                borderRadius: number;
-                backgroundColor: any;
-            };
         };
         icon: {
             fontSize: number;
@@ -869,6 +888,9 @@ export function makeDarkInvertedOverrides(theme: any): {
                     opacity: number;
                 };
             };
+            '&.displayInline': {
+                display: string;
+            };
             '&.border': {
                 border: string;
             };
@@ -884,6 +906,9 @@ export function makeDarkInvertedOverrides(theme: any): {
     MuiCheckbox: {
         root: {
             padding: number;
+            '&.small': {
+                padding: number;
+            };
         };
         colorSecondary: {
             '&$checked': {

package/transpiled/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.d.ts

@@ -583,6 +583,22 @@ export function makeDarkNormalOverrides(theme: any): {
     MuiTableHead: {
         root: {
             backgroundColor: any;
+            '&.virtualized': {
+                '& .virtualizedCheckbox': {
+                    opacity: number;
+                    '&.checked': {
+                        opacity: number;
+                    };
+                    '&:hover': {
+                        opacity: number;
+                    };
+                };
+                '&:hover': {
+                    '& .virtualizedCheckbox': {
+                        opacity: number;
+                    };
+                };
+            };
         };
     };
     MuiTableRow: {
@@ -592,6 +608,25 @@ export function makeDarkNormalOverrides(theme: any): {
                 pointerEvents: string;
                 opacity: number;
             };
+            '&.virtualized': {
+                '& .virtualizedCheckbox': {
+                    opacity: number;
+                    '&.visible': {
+                        opacity: number;
+                    };
+                    '&.checked': {
+                        opacity: number;
+                    };
+                    '&:hover': {
+                        opacity: number;
+                    };
+                };
+                '&:hover': {
+                    '& .virtualizedCheckbox': {
+                        opacity: number;
+                    };
+                };
+            };
         };
     };
     MuiTableCell: {
@@ -601,22 +636,11 @@ export function makeDarkNormalOverrides(theme: any): {
         head: any;
         body: {
             color: any;
-            '&.sortable': {
-                '&$paddingNone': {
-                    '&$alignLeft': {
-                        paddingLeft: string;
-                    };
-                    '&$alignRight': {
-                        paddingRight: string;
-                    };
-                };
-                '&$alignLeft': {
-                    paddingLeft: string;
-                };
-                '&$alignRight': {
-                    paddingRight: string;
-                };
-            };
+            height: string;
+        };
+        paddingCheckbox: {
+            width: number;
+            padding: number;
         };
         stickyHeader: {
             backgroundColor: any;
@@ -626,11 +650,6 @@ export function makeDarkNormalOverrides(theme: any): {
         root: {
             padding: string;
             color: any;
-            '&:hover': {
-                color: any;
-                borderRadius: number;
-                backgroundColor: any;
-            };
         };
         icon: {
             fontSize: number;
@@ -869,6 +888,9 @@ export function makeDarkNormalOverrides(theme: any): {
                     opacity: number;
                 };
             };
+            '&.displayInline': {
+                display: string;
+            };
             '&.border': {
                 border: string;
             };
@@ -884,6 +906,9 @@ export function makeDarkNormalOverrides(theme: any): {
     MuiCheckbox: {
         root: {
             padding: number;
+            '&.small': {
+                padding: number;
+            };
         };
         colorSecondary: {
             '&$checked': {

package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts

@@ -583,6 +583,22 @@ export function makeLightInvertedOverrides(theme: any): {
     MuiTableHead: {
         root: {
             backgroundColor: any;
+            '&.virtualized': {
+                '& .virtualizedCheckbox': {
+                    opacity: number;
+                    '&.checked': {
+                        opacity: number;
+                    };
+                    '&:hover': {
+                        opacity: number;
+                    };
+                };
+                '&:hover': {
+                    '& .virtualizedCheckbox': {
+                        opacity: number;
+                    };
+                };
+            };
         };
     };
     MuiTableRow: {
@@ -592,6 +608,25 @@ export function makeLightInvertedOverrides(theme: any): {
                 pointerEvents: string;
                 opacity: number;
             };
+            '&.virtualized': {
+                '& .virtualizedCheckbox': {
+                    opacity: number;
+                    '&.visible': {
+                        opacity: number;
+                    };
+                    '&.checked': {
+                        opacity: number;
+                    };
+                    '&:hover': {
+                        opacity: number;
+                    };
+                };
+                '&:hover': {
+                    '& .virtualizedCheckbox': {
+                        opacity: number;
+                    };
+                };
+            };
         };
     };
     MuiTableCell: {
@@ -601,22 +636,11 @@ export function makeLightInvertedOverrides(theme: any): {
         head: any;
         body: {
             color: any;
-            '&.sortable': {
-                '&$paddingNone': {
-                    '&$alignLeft': {
-                        paddingLeft: string;
-                    };
-                    '&$alignRight': {
-                        paddingRight: string;
-                    };
-                };
-                '&$alignLeft': {
-                    paddingLeft: string;
-                };
-                '&$alignRight': {
-                    paddingRight: string;
-                };
-            };
+            height: string;
+        };
+        paddingCheckbox: {
+            width: number;
+            padding: number;
         };
         stickyHeader: {
             backgroundColor: any;
@@ -626,11 +650,6 @@ export function makeLightInvertedOverrides(theme: any): {
         root: {
             padding: string;
             color: any;
-            '&:hover': {
-                color: any;
-                borderRadius: number;
-                backgroundColor: any;
-            };
         };
         icon: {
             fontSize: number;
@@ -869,6 +888,9 @@ export function makeLightInvertedOverrides(theme: any): {
                     opacity: number;
                 };
             };
+            '&.displayInline': {
+                display: string;
+            };
             '&.border': {
                 border: string;
             };
@@ -884,6 +906,9 @@ export function makeLightInvertedOverrides(theme: any): {
     MuiCheckbox: {
         root: {
             padding: number;
+            '&.small': {
+                padding: number;
+            };
         };
         colorSecondary: {
             '&$checked': {

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.d.ts

@@ -583,6 +583,22 @@ export function makeLightNormalOverrides(theme: any): {
     MuiTableHead: {
         root: {
             backgroundColor: any;
+            '&.virtualized': {
+                '& .virtualizedCheckbox': {
+                    opacity: number;
+                    '&.checked': {
+                        opacity: number;
+                    };
+                    '&:hover': {
+                        opacity: number;
+                    };
+                };
+                '&:hover': {
+                    '& .virtualizedCheckbox': {
+                        opacity: number;
+                    };
+                };
+            };
         };
     };
     MuiTableRow: {
@@ -592,6 +608,25 @@ export function makeLightNormalOverrides(theme: any): {
                 pointerEvents: string;
                 opacity: number;
             };
+            '&.virtualized': {
+                '& .virtualizedCheckbox': {
+                    opacity: number;
+                    '&.visible': {
+                        opacity: number;
+                    };
+                    '&.checked': {
+                        opacity: number;
+                    };
+                    '&:hover': {
+                        opacity: number;
+                    };
+                };
+                '&:hover': {
+                    '& .virtualizedCheckbox': {
+                        opacity: number;
+                    };
+                };
+            };
         };
     };
     MuiTableCell: {
@@ -601,22 +636,11 @@ export function makeLightNormalOverrides(theme: any): {
         head: any;
         body: {
             color: any;
-            '&.sortable': {
-                '&$paddingNone': {
-                    '&$alignLeft': {
-                        paddingLeft: string;
-                    };
-                    '&$alignRight': {
-                        paddingRight: string;
-                    };
-                };
-                '&$alignLeft': {
-                    paddingLeft: string;
-                };
-                '&$alignRight': {
-                    paddingRight: string;
-                };
-            };
+            height: string;
+        };
+        paddingCheckbox: {
+            width: number;
+            padding: number;
         };
         stickyHeader: {
             backgroundColor: any;
@@ -626,11 +650,6 @@ export function makeLightNormalOverrides(theme: any): {
         root: {
             padding: string;
             color: any;
-            '&:hover': {
-                color: any;
-                borderRadius: number;
-                backgroundColor: any;
-            };
         };
         icon: {
             fontSize: number;
@@ -869,6 +888,9 @@ export function makeLightNormalOverrides(theme: any): {
                     opacity: number;
                 };
             };
+            '&.displayInline': {
+                display: string;
+            };
             '&.border': {
                 border: string;
             };
@@ -884,6 +906,9 @@ export function makeLightNormalOverrides(theme: any): {
     MuiCheckbox: {
         root: {
             padding: number;
+            '&.small': {
+                padding: number;
+            };
         };
         colorSecondary: {
             '&$checked': {

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -484,7 +484,23 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
     },
     MuiTableHead: {
       root: {
-        backgroundColor: theme.palette.background.paper
+        backgroundColor: theme.palette.background.paper,
+        '&.virtualized': {
+          '& .virtualizedCheckbox': {
+            opacity: 0,
+            '&.checked': {
+              opacity: 1
+            },
+            '&:hover': {
+              opacity: 1
+            }
+          },
+          '&:hover': {
+            '& .virtualizedCheckbox': {
+              opacity: 0.5
+            }
+          }
+        }
       }
     },
     MuiTableRow: {
@@ -493,6 +509,25 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
           cursor: 'pointer',
           pointerEvents: 'none',
           opacity: 0.5
+        },
+        '&.virtualized': {
+          '& .virtualizedCheckbox': {
+            opacity: 0,
+            '&.visible': {
+              opacity: 0.5
+            },
+            '&.checked': {
+              opacity: 1
+            },
+            '&:hover': {
+              opacity: 1
+            }
+          },
+          '&:hover': {
+            '& .virtualizedCheckbox': {
+              opacity: 0.5
+            }
+          }
         }
       }
     },
@@ -506,22 +541,11 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
       }),
       body: {
         color: theme.palette.text.secondary,
-        '&.sortable': {
-          '&$paddingNone': {
-            '&$alignLeft': {
-              paddingLeft: '12px'
-            },
-            '&$alignRight': {
-              paddingRight: '12px'
-            }
-          },
-          '&$alignLeft': {
-            paddingLeft: '16px'
-          },
-          '&$alignRight': {
-            paddingRight: '16px'
-          }
-        }
+        height: '2rem'
+      },
+      paddingCheckbox: {
+        width: 32,
+        padding: 0
       },
       stickyHeader: {
         backgroundColor: theme.palette.background.paper
@@ -529,13 +553,8 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
     },
     MuiTableSortLabel: {
       root: {
-        padding: '8px 12px',
-        color: theme.palette.text.secondary,
-        '&:hover': {
-          color: theme.palette.text.primary,
-          borderRadius: 999,
-          backgroundColor: theme.palette.action.hover
-        }
+        padding: '8px 0',
+        color: theme.palette.text.secondary
       },
       icon: {
         fontSize: 14
@@ -788,6 +807,9 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
             opacity: 0.5
           }
         },
+        '&.displayInline': {
+          display: 'inline-flex'
+        },
         '&.border': {
           border: "2px solid ".concat(theme.palette.background.paper)
         },
@@ -802,7 +824,10 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
     },
     MuiCheckbox: {
       root: {
-        padding: 8
+        padding: 8,
+        '&.small': {
+          padding: 6
+        }
       },
       colorSecondary: {
         '&$checked': {

package/transpiled/react/Table/Virtualized/Cell.d.ts

@@ -1,7 +1,8 @@
-declare var _default: React.MemoExoticComponent<({ row, columns, column, children }: {
+declare var _default: React.MemoExoticComponent<({ row, columns, column, onClick, children }: {
     row: any;
     columns: any;
     column: any;
+    onClick: any;
     children: any;
 }) => JSX.Element>;
 export default _default;

package/transpiled/react/Table/Virtualized/Cell.js

@@ -1,46 +1,53 @@
-import cx from 'classnames';
+import get from 'lodash/get';
 import React from 'react';
 import TableCell from "cozy-ui/transpiled/react/TableCell";
 import { makeStyles } from "cozy-ui/transpiled/react/styles";
 var useStyles = makeStyles({
   root: {
-    width: function width(_ref) {
-      var column = _ref.column;
-      return column.width;
+    cursor: function cursor(_ref) {
+      var isClickable = _ref.isClickable;
+      return isClickable ? 'pointer' : undefined;
     },
-    maxWidth: function maxWidth(_ref2) {
+    width: function width(_ref2) {
       var column = _ref2.column;
+      return column.width;
+    },
+    maxWidth: function maxWidth(_ref3) {
+      var column = _ref3.column;
       return column.maxWidth;
     }
   }
 });
 
-var Cell = function Cell(_ref3) {
+var Cell = function Cell(_ref4) {
   var _column$textAlign;
 
-  var row = _ref3.row,
-      columns = _ref3.columns,
-      column = _ref3.column,
-      children = _ref3.children;
+  var row = _ref4.row,
+      columns = _ref4.columns,
+      column = _ref4.column,
+      _onClick = _ref4.onClick,
+      children = _ref4.children;
   var classes = useStyles({
-    column: column
+    column: column,
+    isClickable: !!_onClick
   });
+  var cellContent = get(row, column.id, '—');
   return /*#__PURE__*/React.createElement(TableCell, {
     key: column.id,
     classes: classes,
-    className: cx({
-      sortable: column.sortable !== false
-    }),
     align: (_column$textAlign = column.textAlign) !== null && _column$textAlign !== void 0 ? _column$textAlign : 'left',
-    padding: column.disablePadding ? 'none' : 'normal'
+    padding: column.disablePadding ? 'none' : 'normal',
+    onClick: function onClick() {
+      return _onClick === null || _onClick === void 0 ? void 0 : _onClick(row, column);
+    }
   }, children ? React.Children.map(children, function (child) {
     return /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
       row: row,
       columns: columns,
       column: column,
-      cell: row[column.id]
+      cell: cellContent
     }) : null;
-  }) : row[column.id]);
+  }) : cellContent);
 };
 
 export default /*#__PURE__*/React.memo(Cell);