cozy-sharing 12.0.0 → 12.2.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [12.2.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@12.1.0...cozy-sharing@12.2.0) (2024-03-22)
+
+
+### Features
+
+* Allow to add group with only more than one member ([177dc4a](https://github.com/cozy/cozy-libs/commit/177dc4a4fbceefed1ce52f2a5275c67e46b6430f))
+
+
+
+
+
+# [12.1.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@12.0.0...cozy-sharing@12.1.0) (2024-03-22)
+
+
+### Features
+
+* Adapt modal design to allow gutters into ListItem ([39dc590](https://github.com/cozy/cozy-libs/commit/39dc5905ee19e07967227e76d376ff04c6145c1e))
+* Show detail of recipient groups ([7d731db](https://github.com/cozy/cozy-libs/commit/7d731db9d313ba763652612352ce393f475bfe5f))
+
+
+
+
+
 # [12.0.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@11.1.0...cozy-sharing@12.0.0) (2024-03-21)
 
 

package/dist/components/ConfirmTrustedRecipientsDialog.js

@@ -1,7 +1,10 @@
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
+import cx from 'classnames';
 import React from 'react';
+import List from 'cozy-ui/transpiled/react/List';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import MemberRecipient from './Recipient/MemberRecipient';
 import ShareDialogTwoStepsConfirmationContainer from './ShareDialogTwoStepsConfirmationContainer';
@@ -16,17 +19,22 @@ var SharingContent = function SharingContent(_ref) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
     variant: "body1",
-    className: "u-mb-2"
-  }, t("ConfirmRecipientModal.intruction")), recipientsToBeConfirmed.map(function (recipientConfirmationData) {
+    className: cx('u-mb-half', isMobile ? 'u-ph-1 u-mt-1' : 'u-ph-2 u-mt-1-half')
+  }, t("ConfirmRecipientModal.intruction")), /*#__PURE__*/React.createElement(List, {
+    className: isMobile ? 'u-mb-half' : 'u-mb-1'
+  }, recipientsToBeConfirmed.map(function (recipientConfirmationData) {
     return /*#__PURE__*/React.createElement(MemberRecipient, _extends({}, recipientConfirmationData, {
       key: "key_r_".concat(recipientConfirmationData.id),
       isOwner: false,
       recipientConfirmationData: recipientConfirmationData,
       verifyRecipient: verifyRecipient
     }));
-  }));
+  })));
 };
 /**
  * Displays the dialog's title that can be used when ConfirmTrustedRecipientsDialog is in sharing state

package/dist/components/ConfirmTrustedRecipientsDialog.stories.js

@@ -0,0 +1,39 @@
+import ConfirmTrustedRecipientsDialog from './ConfirmTrustedRecipientsDialog';
+var meta = {
+  component: ConfirmTrustedRecipientsDialog,
+  args: {
+    recipientsToBeConfirmed: [{
+      instance: 'https://example.com',
+      isOwner: false,
+      status: 'ready',
+      recipientConfirmationData: null,
+      verifyRecipient: function verifyRecipient() {},
+      fadeIn: true,
+      type: 'two-way',
+      onRevoke: function onRevoke() {},
+      onRevokeSelf: function onRevokeSelf() {}
+    }]
+  }
+};
+export default meta;
+export var Default = {
+  name: 'Default',
+  args: {
+    twoStepsConfirmationMethods: {
+      getRecipientsToBeConfirmed: function getRecipientsToBeConfirmed() {
+        return [{
+          name: 'John Doe',
+          instance: 'https://example.com',
+          isOwner: false,
+          status: 'ready'
+        }, {
+          name: 'Alice Doe',
+          instance: 'https://example.com',
+          isOwner: false,
+          status: 'ready'
+        }];
+      }
+    },
+    verifyRecipient: function verifyRecipient() {}
+  }
+};

package/dist/components/ContactSuggestion.js

@@ -1,4 +1,3 @@
-import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { models } from 'cozy-client';
@@ -10,8 +9,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import { Contact, Group, getDisplayName, getInitials } from '../models';
 var ContactModel = models.contact;
 export var ContactSuggestion = function ContactSuggestion(_ref) {
-  var contactOrGroup = _ref.contactOrGroup,
-      contacts = _ref.contacts;
+  var contactOrGroup = _ref.contactOrGroup;
 
   var _useI18n = useI18n(),
       t = _useI18n.t;
@@ -20,19 +18,10 @@ export var ContactSuggestion = function ContactSuggestion(_ref) {
 
   if (contactOrGroup._type === Group.doctype) {
     name = contactOrGroup.name;
-    var membersCount = contacts.reduce(function (total, contact) {
-      if (get(contact, 'relationships.groups.data', []).map(function (group) {
-        return group._id;
-      }).includes(contactOrGroup._id)) {
-        return total + 1;
-      }
-
-      return total;
-    }, 0).toString();
+    avatarText = 'G';
     details = t('Share.members.count', {
-      smart_count: membersCount
+      smart_count: contactOrGroup.membersCount.toString()
     });
-    avatarText = 'G';
   } else {
     name = getDisplayName(contactOrGroup);
     avatarText = getInitials(contactOrGroup);

package/dist/components/ContactSuggestion.spec.js

@@ -1,21 +1,17 @@
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { ContactSuggestion } from './ContactSuggestion';
 import AppLike from '../../test/AppLike';
-
-var WrappingComponent = function WrappingComponent(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement(AppLike, null, children);
-};
-
 describe('ContactSuggestion component', function () {
-  var fakeT = jest.fn(function (s, args) {
-    if (s === 'Share.members.count') {
-      return "".concat(args.smart_count, " members");
-    }
+  var setup = function setup(_ref) {
+    var contactOrGroup = _ref.contactOrGroup;
+    return render( /*#__PURE__*/React.createElement(ContactSuggestion, {
+      contactOrGroup: contactOrGroup
+    }), {
+      wrapper: AppLike
+    });
+  };
 
-    return s;
-  });
   it('should display contact suggestion for a contact', function () {
     var jonSnow = {
       _id: 'f3a4e501-abbd',
@@ -34,17 +30,11 @@ describe('ContactSuggestion component', function () {
       }],
       _type: 'io.cozy.contacts'
     };
-    var contacts = [jonSnow];
-    var props = {
-      contactOrGroup: jonSnow,
-      contacts: contacts,
-      t: fakeT
-    };
-    var jsx = /*#__PURE__*/React.createElement(ContactSuggestion, props);
-    var wrapper = mount(jsx, {
-      wrappingComponent: WrappingComponent
+    setup({
+      contactOrGroup: jonSnow
     });
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByText('Jon Snow')).toBeInTheDocument();
+    expect(screen.getByText('https://jonsnow.mycozy.cloud')).toBeInTheDocument();
   });
   it('should display contact suggestion for a contact without fullname (for example created by a share modal)', function () {
     var jonSnow = {
@@ -57,94 +47,22 @@ describe('ContactSuggestion component', function () {
       name: undefined,
       _type: 'io.cozy.contacts'
     };
-    var contacts = [jonSnow];
-    var props = {
-      contactOrGroup: jonSnow,
-      contacts: contacts,
-      t: fakeT
-    };
-    var jsx = /*#__PURE__*/React.createElement(ContactSuggestion, props);
-    var wrapper = mount(jsx, {
-      wrappingComponent: WrappingComponent
+    setup({
+      contactOrGroup: jonSnow
     });
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByText('jon.snow@email.com')).toBeInTheDocument();
   });
   it('should display contact suggestion for a group', function () {
-    var jon = {
-      _id: 'f3a4e501-abbd',
-      fullname: 'Jon Snow',
-      name: {
-        givenName: 'Jon',
-        familyName: 'Snow'
-      },
-      email: [{
-        address: 'jon.snow@email.com',
-        type: 'primary'
-      }],
-      _type: 'io.cozy.contacts',
-      relationships: {
-        groups: {
-          data: [{
-            _id: '610718e6-2d7a',
-            _type: 'io.cozy.contacts.groups'
-          }]
-        }
-      }
-    };
-    var cersei = {
-      _id: '42dc490a-7878',
-      fullname: 'Cersei Lannister',
-      name: {
-        givenName: 'Cersei',
-        familyName: 'Lannister'
-      },
-      email: [{
-        address: 'cersei@email.com',
-        type: 'primary'
-      }],
-      _type: 'io.cozy.contacts',
-      relationships: {
-        groups: {
-          data: []
-        }
-      }
-    };
-    var sam = {
-      _id: 'b5bed853-93da',
-      fullname: 'Samwell Tarly',
-      name: {
-        givenName: 'Samwell',
-        familyName: 'Tarly'
-      },
-      email: [{
-        address: 'samwell@email.com',
-        type: 'primary'
-      }],
-      _type: 'io.cozy.contacts',
-      relationships: {
-        groups: {
-          data: [{
-            _id: '610718e6-2d7a',
-            _type: 'io.cozy.contacts.groups'
-          }]
-        }
-      }
-    };
-    var contacts = [jon, cersei, sam];
     var theNightsWatch = {
       _id: '610718e6-2d7a',
       name: "The Night's Watch",
-      _type: 'io.cozy.contacts.groups'
-    };
-    var props = {
-      contactOrGroup: theNightsWatch,
-      contacts: contacts,
-      t: fakeT
+      _type: 'io.cozy.contacts.groups',
+      membersCount: 2
     };
-    var jsx = /*#__PURE__*/React.createElement(ContactSuggestion, props);
-    var wrapper = mount(jsx, {
-      wrappingComponent: WrappingComponent
+    setup({
+      contactOrGroup: theNightsWatch
     });
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByText("The Night's Watch")).toBeInTheDocument();
+    expect(screen.getByText('2 members')).toBeInTheDocument();
   });
 });

package/dist/components/Recipient/GroupRecipient.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
 import { useClient } from 'cozy-client';
 import Fade from 'cozy-ui/transpiled/react/Fade';
 import ListItem from 'cozy-ui/transpiled/react/ListItem';
@@ -6,7 +7,9 @@ import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
+import { GroupRecipientDetail } from './GroupRecipientDetail';
 import { GroupRecipientPermissions } from './GroupRecipientPermissions';
 import { FADE_IN_DURATION } from '../../helpers/recipients';
 import { GroupAvatar } from '../Avatar/GroupAvatar';
@@ -14,12 +17,22 @@ import { GroupAvatar } from '../Avatar/GroupAvatar';
 var GroupRecipient = function GroupRecipient(props) {
   var name = props.name,
       members = props.members,
-      fadeIn = props.fadeIn;
+      fadeIn = props.fadeIn,
+      owner = props.owner;
 
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
   var client = useClient();
+
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isDetailOpened = _useState2[0],
+      setDetailOpened = _useState2[1];
+
   var nbMember = members.length;
   var nbMemberReady = members.filter(function (member) {
     return !['revoked', 'mail-not-sent'].includes(member.status);
@@ -27,11 +40,22 @@ var GroupRecipient = function GroupRecipient(props) {
   var isCurrentInstanceInsideMembers = members.some(function (member) {
     return member.instance === client.options.uri;
   });
-  return /*#__PURE__*/React.createElement(Fade, {
+
+  var toogleDetailOpened = function toogleDetailOpened() {
+    setDetailOpened(!isDetailOpened);
+  };
+
+  var closeDetail = function closeDetail() {
+    setDetailOpened(false);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Fade, {
     in: true,
     timeout: fadeIn ? FADE_IN_DURATION : 0
   }, /*#__PURE__*/React.createElement(ListItem, {
-    disableGutters: true
+    button: true,
+    onClick: toogleDetailOpened,
+    gutters: isMobile ? 'default' : 'double'
   }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(GroupAvatar, {
     size: "small"
   })), /*#__PURE__*/React.createElement(ListItemText, {
@@ -43,7 +67,14 @@ var GroupRecipient = function GroupRecipient(props) {
       nbMember: nbMember,
       nbMemberReady: nbMemberReady
     }) + (isCurrentInstanceInsideMembers ? " (".concat(t('GroupRecipient.secondary_you'), ")") : '')
-  }), /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(GroupRecipientPermissions, props))));
+  }), /*#__PURE__*/React.createElement(ListItemSecondaryAction, {
+    className: isMobile ? 'u-mr-1' : 'u-mr-2'
+  }, /*#__PURE__*/React.createElement(GroupRecipientPermissions, props)))), isDetailOpened ? /*#__PURE__*/React.createElement(GroupRecipientDetail, {
+    owner: owner,
+    name: name,
+    members: members,
+    onClose: closeDetail
+  }) : null);
 };
 
 export { GroupRecipient };

package/dist/components/Recipient/GroupRecipient.stories.js

@@ -3,8 +3,9 @@ var meta = {
   component: GroupRecipient,
   args: {
     name: 'Family',
-    isOwner: true,
-    read_only: false,
+    owner: {
+      public_name: 'Alice'
+    },
     members: [{
       status: 'ready'
     }, {

package/dist/components/Recipient/GroupRecipientDetail.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs';
+import Typography from 'cozy-ui/transpiled/react/Typography';
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
+import { GroupRecipientDetailWithAccess } from './GroupRecipientDetailWithAccess';
+import { GroupRecipientDetailWithoutAccess } from './GroupRecipientDetailWithoutAccess';
+
+var GroupRecipientDetail = function GroupRecipientDetail(_ref) {
+  var name = _ref.name,
+      owner = _ref.owner,
+      members = _ref.members,
+      onClose = _ref.onClose;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var withAccess = members.filter(function (member) {
+    return !['revoked', 'mail-not-sent'].includes(member.status);
+  });
+  var withoutAccess = members.filter(function (member) {
+    return ['revoked', 'mail-not-sent'].includes(member.status);
+  });
+  var ownerName = owner.public_name;
+  return /*#__PURE__*/React.createElement(Dialog, {
+    open: true,
+    size: "small",
+    onClose: onClose,
+    title: /*#__PURE__*/React.createElement(React.Fragment, null, name, ownerName ? /*#__PURE__*/React.createElement(Typography, {
+      variant: "caption"
+    }, t('GroupRecipientDetail.subtitle', {
+      ownerName: ownerName
+    })) : null),
+    content: /*#__PURE__*/React.createElement("div", {
+      className: "u-flex u-stack-xs u-flex-column"
+    }, withAccess.length > 0 ? /*#__PURE__*/React.createElement(GroupRecipientDetailWithAccess, {
+      withAccess: withAccess
+    }) : null, withoutAccess.length > 0 ? /*#__PURE__*/React.createElement(GroupRecipientDetailWithoutAccess, {
+      withoutAccess: withoutAccess
+    }) : null)
+  });
+};
+
+export { GroupRecipientDetail };

package/dist/components/Recipient/GroupRecipientDetail.stories.js

@@ -0,0 +1,55 @@
+import { GroupRecipientDetail } from './GroupRecipientDetail';
+var meta = {
+  component: GroupRecipientDetail,
+  args: {
+    name: 'Family',
+    owner: {
+      public_name: 'Alice'
+    }
+  }
+};
+export default meta;
+export var Default = {
+  name: 'Default',
+  args: {
+    members: [{
+      name: 'Alice',
+      instance: 'http://alice.cozy.localhost:8080',
+      status: 'ready'
+    }, {
+      name: 'marine@google.com',
+      status: 'mail-not-sent'
+    }, {
+      email: 'Martin',
+      status: 'pending'
+    }, {
+      name: 'Paul',
+      status: 'revoked'
+    }]
+  }
+};
+export var OnlyWithAccess = {
+  name: 'OnlyWithAccess',
+  args: {
+    members: [{
+      name: 'Alice',
+      instance: 'http://alice.cozy.localhost:8080',
+      status: 'ready'
+    }, {
+      name: 'Martin',
+      status: 'pending'
+    }]
+  }
+};
+export var OnlyWithoutAccess = {
+  name: 'OnlyWithoutAccess',
+  args: {
+    members: [{
+      name: 'marine@google.com',
+      status: 'mail-not-sent'
+    }, {
+      name: 'Paul',
+      status: 'revoked'
+    }]
+  }
+};

package/dist/components/Recipient/GroupRecipientDetailWithAccess.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import Icon from 'cozy-ui/transpiled/react/Icon';
+import ToTheCloudIcon from 'cozy-ui/transpiled/react/Icons/ToTheCloud';
+import List from 'cozy-ui/transpiled/react/List';
+import ListItem from 'cozy-ui/transpiled/react/ListItem';
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
+import Typography from 'cozy-ui/transpiled/react/Typography';
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
+import { getInitials, getDisplayName } from '../../models';
+
+var GroupRecipientDetailWithAccess = function GroupRecipientDetailWithAccess(_ref) {
+  var withAccess = _ref.withAccess;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "subtitle2"
+  }, t('GroupRecipientDetail.withAccess.title')), /*#__PURE__*/React.createElement(List, null, withAccess.map(function (recipient) {
+    var name = getDisplayName(recipient);
+    return /*#__PURE__*/React.createElement(ListItem, {
+      disableGutters: true,
+      key: recipient.index
+    }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Avatar, {
+      text: getInitials(recipient),
+      textId: name
+    })), /*#__PURE__*/React.createElement(ListItemText, {
+      primary: name,
+      secondary: recipient.instance ? /*#__PURE__*/React.createElement("div", {
+        className: "u-flex u-flex-items-center"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: ToTheCloudIcon,
+        size: 10,
+        style: {
+          marginRight: '0.25rem'
+        }
+      }), recipient.instance) : null
+    }));
+  })));
+};
+
+export { GroupRecipientDetailWithAccess };

package/dist/components/Recipient/GroupRecipientDetailWithoutAccess.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import Icon from 'cozy-ui/transpiled/react/Icon';
+import ForbiddenIcon from 'cozy-ui/transpiled/react/Icons/Forbidden';
+import List from 'cozy-ui/transpiled/react/List';
+import ListItem from 'cozy-ui/transpiled/react/ListItem';
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
+import Typography from 'cozy-ui/transpiled/react/Typography';
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
+import { getInitials, getDisplayName } from '../../models';
+
+var GroupRecipientDetailWithoutAccess = function GroupRecipientDetailWithoutAccess(_ref) {
+  var withoutAccess = _ref.withoutAccess;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "subtitle2"
+  }, t('GroupRecipientDetail.withoutAccess.title')), /*#__PURE__*/React.createElement(List, null, withoutAccess.map(function (recipient) {
+    var icon = recipient.status === 'revoked' ? ForbiddenIcon : null;
+    var name = getDisplayName(recipient);
+    return /*#__PURE__*/React.createElement(ListItem, {
+      disableGutters: true,
+      key: recipient.index
+    }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Avatar, {
+      text: getInitials(recipient),
+      textId: name
+    })), /*#__PURE__*/React.createElement(ListItemText, {
+      primary: name,
+      secondary: /*#__PURE__*/React.createElement("div", {
+        className: "u-flex u-flex-items-center"
+      }, icon ? /*#__PURE__*/React.createElement(Icon, {
+        icon: icon,
+        size: 10,
+        style: {
+          marginRight: '0.25rem'
+        }
+      }) : null, t("GroupRecipientDetail.withoutAccess.status.".concat(recipient.status)))
+    }));
+  })));
+};
+
+export { GroupRecipientDetailWithoutAccess };

package/dist/components/Recipient/LinkRecipient.js

@@ -9,6 +9,7 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem';
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import LinkRecipientPermissions from './LinkRecipientPermissions';
 import RecipientConfirm from './RecipientConfirm';
@@ -35,6 +36,9 @@ var LinkRecipient = function LinkRecipient(props) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
   var recipientConfirmationData = props.recipientConfirmationData,
       verifyRecipient = props.verifyRecipient,
       link = props.link,
@@ -49,7 +53,7 @@ var LinkRecipient = function LinkRecipient(props) {
     in: true,
     timeout: fadeIn ? FADE_IN_DURATION : 0
   }, /*#__PURE__*/React.createElement(ListItem, {
-    disableGutters: true
+    gutters: isMobile ? 'default' : 'double'
   }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Circle, {
     size: "small",
     className: styles['link-recipient-icon-circle']

package/dist/components/Recipient/MemberRecipient.js

@@ -9,6 +9,7 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem';
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import MemberRecipientPermissions from './MemberRecipientPermissions';
 import MemberRecipientStatus from './MemberRecipientStatus';
@@ -24,6 +25,9 @@ var MemberRecipient = function MemberRecipient(props) {
 
   var client = useClient();
 
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
   var instance = props.instance,
       isOwner = props.isOwner,
       status = props.status,
@@ -45,7 +49,7 @@ var MemberRecipient = function MemberRecipient(props) {
     in: true,
     timeout: fadeIn ? FADE_IN_DURATION : 0
   }, /*#__PURE__*/React.createElement(ListItem, {
-    disableGutters: true
+    gutters: isMobile ? 'default' : 'double'
   }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(MemberAvatar, {
     size: "small",
     recipient: props

package/dist/components/Recipient/RecipientList.stories.js

@@ -34,6 +34,9 @@ export var WithGroup = {
       addedBy: 0,
       read_only: false,
       index: 0,
+      owner: {
+        public_name: 'Alice'
+      },
       members: [{
         status: 'pending',
         email: 'ben@gmail.com',

package/dist/components/ShareAutosuggest.js

@@ -174,9 +174,6 @@ var ShareAutocomplete = function ShareAutocomplete(_ref) {
 
   var renderSuggestion = function renderSuggestion(contactOrGroup) {
     return /*#__PURE__*/React.createElement(ContactSuggestion, {
-      contacts: contactsAndGroups.filter(function (item) {
-        return item._type === Contact.doctype;
-      }),
       contactOrGroup: contactOrGroup
     });
   };