cozy-sharing 12.2.0 → 13.0.0

package/.storybook/preview.jsx

@@ -3,6 +3,7 @@ import React from "react";
 import 'cozy-ui/dist/cozy-ui.min.css'
 import 'cozy-ui/dist/cozy-ui.utils.min.css'
 import 'cozy-ui/transpiled/react/stylesheet.css'
+import '../dist/stylesheet.css'
 
 import I18n from 'cozy-ui/transpiled/react/providers/I18n'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [13.0.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@12.3.0...cozy-sharing@13.0.0) (2024-04-08)
+
+
+### Bug Fixes
+
+* **GroupRecipientDetail:** Improve member display ([2bb65cf](https://github.com/cozy/cozy-libs/commit/2bb65cf5218781845a5587433952437b3c764b97))
+* Improve secondary text of GroupRecipient ([d747f9c](https://github.com/cozy/cozy-libs/commit/d747f9c6ad30701c16b9f888d4aee7729a5fc28b))
+* Remove translation error when there is no type like for owner ([830d5fa](https://github.com/cozy/cozy-libs/commit/830d5faaaea118189f574d6cec859ba361ee4cd5))
+* **ShareAutosuggest:** Align correctly loading state ([9d93952](https://github.com/cozy/cozy-libs/commit/9d93952b1740c6974da0ced62bd81d1990311b40))
+* Show all the members from a group even unreachable ones ([e62ec59](https://github.com/cozy/cozy-libs/commit/e62ec5980bcb037a2af28cb64d522abdc9fa0408))
+* Show group avatar into share input ([632658a](https://github.com/cozy/cozy-libs/commit/632658af64a8b8f1bcd4ba72d9b0e563d9a8dfdd))
+* Show permissions when the current user is inside members ([d28d4b4](https://github.com/cozy/cozy-libs/commit/d28d4b46938aafddb39884511e7859d800e953b8))
+
+
+### Features
+
+* Improve the message of success to integrate the notion of groups ([f0945b7](https://github.com/cozy/cozy-libs/commit/f0945b7e054a14d35e5d689f9db65c53df0286c6))
+* **ShareRecipientsInput:** Simplify loading state ([e2ec136](https://github.com/cozy/cozy-libs/commit/e2ec136363df578bec338fde9336ac09ed573bb1))
+* Update cozy-ui from 103.8.2 to 105.3.1 ([e1b21f8](https://github.com/cozy/cozy-libs/commit/e1b21f887fb55e5ddab7348f3f5fd41631318cdf))
+
+
+### BREAKING CHANGES
+
+* you must have `cozy-ui >= 105.3.1`
+
+
+
+
+
+# [12.3.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@12.2.0...cozy-sharing@12.3.0) (2024-03-25)
+
+
+### Features
+
+* Add GroupAvatar into AvatarList ([1c66999](https://github.com/cozy/cozy-libs/commit/1c669995b08d84a3aa8d6dd950fa4abf22566395))
+
+
+
+
+
 # [12.2.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@12.1.0...cozy-sharing@12.2.0) (2024-03-22)
 
 

package/dist/components/Avatar/AvatarList.js

@@ -5,6 +5,7 @@ import { useClient } from 'cozy-client';
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link';
 import { ExtraAvatar } from './ExtraAvatar';
+import { GroupAvatar } from './GroupAvatar';
 import { MemberAvatar } from './MemberAvatar';
 import { getDisplayName } from '../../models';
 var styles = {
@@ -83,10 +84,20 @@ var AvatarList = function AvatarList(_ref2) {
     className: styles['recipients-avatars--plusX'],
     extraRecipients: extraRecipients,
     size: size
-  })), shownRecipients.map(function (recipient, idx) {
+  })), shownRecipients.map(function (recipient) {
+    if (recipient.members) {
+      return /*#__PURE__*/React.createElement("span", {
+        "data-testid": "AvatarList-avatar".concat(recipient.status === 'owner' ? '-owner' : ''),
+        key: recipient.index
+      }, /*#__PURE__*/React.createElement(GroupAvatar, {
+        size: size,
+        className: cx(styles['recipients-avatars--avatar'])
+      }));
+    }
+
     return /*#__PURE__*/React.createElement("span", {
       "data-testid": "AvatarList-avatar".concat(recipient.status === 'owner' ? '-owner' : ''),
-      key: idx
+      key: recipient.index
     }, /*#__PURE__*/React.createElement(MemberAvatar, {
       recipient: recipient,
       size: size,

package/dist/components/Avatar/AvatarList.spec.js

@@ -9,20 +9,25 @@ import { AvatarList, MAX_DISPLAYED_RECIPIENTS, excludeMeAsOwnerFromRecipients }
 import AppLike from '../../../test/AppLike';
 var mockRecipients = new Array(MAX_DISPLAYED_RECIPIENTS - 1).fill({
   status: 'owner',
-  public_name: 'cozy'
+  public_name: 'cozy',
+  index: 'sharing-123-member-0'
 }, 0, 1).fill({
   status: 'pending',
-  name: 'Mitch Young'
+  name: 'Mitch Young',
+  index: 'sharing-123-member-1'
 }, 1);
 var mockMoreRecipientsThanMaxDisplayed = [].concat(_toConsumableArray(mockRecipients), [{
   status: 'mail-not-send',
-  name: 'Lyn Webster'
+  name: 'Lyn Webster',
+  index: 'sharing-123-member-2'
 }, {
   status: 'ready',
-  name: 'Richelle Young'
+  name: 'Richelle Young',
+  index: 'sharing-123-member-3'
 }, {
   status: 'ready',
-  name: 'John Connor'
+  name: 'John Connor',
+  index: 'sharing-123-member-4'
 }]);
 describe('AvatarList', function () {
   var client = createMockClient({});
@@ -103,7 +108,7 @@ describe('AvatarList', function () {
   });
 });
 describe('excludeMeAsOwnerFromRecipients', function () {
-  test('excludeMeAsOwnerFromRecipients behavior', function () {
+  it('excludeMeAsOwnerFromRecipients behavior', function () {
     var recipients = [{
       status: 'owner',
       instance: 'http://foo1.cozy.bar'

package/dist/components/Avatar/AvatarList.stories.js

@@ -4,11 +4,23 @@ import { recipients } from '../../../.storybook/fixtures/recipients';
 var meta = {
   component: AvatarList,
   args: {
-    recipients: [].concat(_toConsumableArray(recipients), _toConsumableArray(recipients))
+    recipients: _toConsumableArray(recipients)
   }
 };
 export default meta;
 export var Default = {
   name: 'Default',
   args: {}
+};
+export var WithGroups = {
+  name: 'With groups',
+  args: {
+    recipients: [].concat(_toConsumableArray(recipients), [{
+      name: 'Group 1',
+      type: 'group',
+      members: [{
+        public_name: 'Alice'
+      }]
+    }])
+  }
 };

package/dist/components/Avatar/GroupAvatar.js

@@ -3,10 +3,12 @@ import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import TeamIcon from 'cozy-ui/transpiled/react/Icons/Team';
 
 var GroupAvatar = function GroupAvatar(_ref) {
-  var size = _ref.size;
+  var size = _ref.size,
+      className = _ref.className;
   return /*#__PURE__*/React.createElement(Avatar, {
     icon: TeamIcon,
-    size: size
+    size: size,
+    className: className
   });
 };
 

package/dist/components/ContactSuggestion.js

@@ -6,6 +6,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 { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
+import { GroupAvatar } from './Avatar/GroupAvatar';
 import { Contact, Group, getDisplayName, getInitials } from '../models';
 var ContactModel = models.contact;
 export var ContactSuggestion = function ContactSuggestion(_ref) {
@@ -15,12 +16,13 @@ export var ContactSuggestion = function ContactSuggestion(_ref) {
       t = _useI18n.t;
 
   var avatarText, name, details;
+  var isContactGroup = contactOrGroup._type === Group.doctype;
 
-  if (contactOrGroup._type === Group.doctype) {
+  if (isContactGroup) {
     name = contactOrGroup.name;
     avatarText = 'G';
     details = t('Share.members.count', {
-      smart_count: contactOrGroup.membersCount.toString()
+      smart_count: contactOrGroup.members.length.toString()
     });
   } else {
     name = getDisplayName(contactOrGroup);
@@ -30,7 +32,9 @@ export var ContactSuggestion = function ContactSuggestion(_ref) {
 
   return /*#__PURE__*/React.createElement(ListItem, {
     button: true
-  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Avatar, {
+  }, /*#__PURE__*/React.createElement(ListItemIcon, null, isContactGroup ? /*#__PURE__*/React.createElement(GroupAvatar, {
+    size: "small"
+  }) : /*#__PURE__*/React.createElement(Avatar, {
     text: avatarText,
     size: "small"
   })), /*#__PURE__*/React.createElement(ListItemText, {

package/dist/components/ContactSuggestion.spec.js

@@ -57,7 +57,13 @@ describe('ContactSuggestion component', function () {
       _id: '610718e6-2d7a',
       name: "The Night's Watch",
       _type: 'io.cozy.contacts.groups',
-      membersCount: 2
+      members: [{
+        _id: 'f3a4e501-abbd',
+        fullname: 'Jon Snow'
+      }, {
+        _id: 'ab23a451-tzas',
+        fullname: 'Samwell Tarly'
+      }]
     };
     setup({
       contactOrGroup: theNightsWatch

package/dist/components/Recipient/GroupRecipient.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
 import { useClient } from 'cozy-client';
@@ -11,14 +12,15 @@ 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 { FADE_IN_DURATION, getGroupRecipientSecondaryText } from '../../helpers/recipients';
 import { GroupAvatar } from '../Avatar/GroupAvatar';
 
 var GroupRecipient = function GroupRecipient(props) {
   var name = props.name,
       members = props.members,
       fadeIn = props.fadeIn,
-      owner = props.owner;
+      owner = props.owner,
+      isOwner = props.isOwner;
 
   var _useI18n = useI18n(),
       t = _useI18n.t;
@@ -37,7 +39,7 @@ var GroupRecipient = function GroupRecipient(props) {
   var nbMemberReady = members.filter(function (member) {
     return !['revoked', 'mail-not-sent'].includes(member.status);
   }).length;
-  var isCurrentInstanceInsideMembers = members.some(function (member) {
+  var isUserInsideMembers = members.some(function (member) {
     return member.instance === client.options.uri;
   });
 
@@ -63,13 +65,18 @@ var GroupRecipient = function GroupRecipient(props) {
       className: "u-ellipsis",
       variant: "body1"
     }, name),
-    secondary: t('GroupRecipient.secondary', {
+    secondary: getGroupRecipientSecondaryText({
+      t: t,
       nbMember: nbMember,
-      nbMemberReady: nbMemberReady
-    }) + (isCurrentInstanceInsideMembers ? " (".concat(t('GroupRecipient.secondary_you'), ")") : '')
+      nbMemberReady: nbMemberReady,
+      isUserInsideMembers: isUserInsideMembers
+    })
   }), /*#__PURE__*/React.createElement(ListItemSecondaryAction, {
     className: isMobile ? 'u-mr-1' : 'u-mr-2'
-  }, /*#__PURE__*/React.createElement(GroupRecipientPermissions, props)))), isDetailOpened ? /*#__PURE__*/React.createElement(GroupRecipientDetail, {
+  }, /*#__PURE__*/React.createElement(GroupRecipientPermissions, _extends({
+    isUserInsideMembers: isUserInsideMembers
+  }, props))))), isDetailOpened ? /*#__PURE__*/React.createElement(GroupRecipientDetail, {
+    isOwner: isOwner,
     owner: owner,
     name: name,
     members: members,

package/dist/components/Recipient/GroupRecipientDetail.js

@@ -9,7 +9,8 @@ var GroupRecipientDetail = function GroupRecipientDetail(_ref) {
   var name = _ref.name,
       owner = _ref.owner,
       members = _ref.members,
-      onClose = _ref.onClose;
+      onClose = _ref.onClose,
+      isOwner = _ref.isOwner;
 
   var _useI18n = useI18n(),
       t = _useI18n.t;
@@ -35,7 +36,8 @@ var GroupRecipientDetail = function GroupRecipientDetail(_ref) {
     }, withAccess.length > 0 ? /*#__PURE__*/React.createElement(GroupRecipientDetailWithAccess, {
       withAccess: withAccess
     }) : null, withoutAccess.length > 0 ? /*#__PURE__*/React.createElement(GroupRecipientDetailWithoutAccess, {
-      withoutAccess: withoutAccess
+      withoutAccess: withoutAccess,
+      isOwner: isOwner
     }) : null)
   });
 };

package/dist/components/Recipient/GroupRecipientDetailWithAccess.js

@@ -1,13 +1,13 @@
 import React from 'react';
+import { useClient } from 'cozy-client';
 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 MemberRecipientStatus from './MemberRecipientStatus';
 import { getInitials, getDisplayName } from '../../models';
 
 var GroupRecipientDetailWithAccess = function GroupRecipientDetailWithAccess(_ref) {
@@ -16,10 +16,12 @@ var GroupRecipientDetailWithAccess = function GroupRecipientDetailWithAccess(_re
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
+  var client = useClient();
   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);
+    var isMe = recipient.instance === client.options.uri;
     return /*#__PURE__*/React.createElement(ListItem, {
       disableGutters: true,
       key: recipient.index
@@ -28,15 +30,11 @@ var GroupRecipientDetailWithAccess = function GroupRecipientDetailWithAccess(_re
       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
+      secondary: /*#__PURE__*/React.createElement(MemberRecipientStatus, {
+        status: recipient.status,
+        isMe: isMe,
+        instance: recipient.instance
+      })
     }));
   })));
 };

package/dist/components/Recipient/GroupRecipientDetailWithoutAccess.js

@@ -8,10 +8,12 @@ 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 { DEFAULT_DISPLAY_NAME } from '../../helpers/recipients';
 import { getInitials, getDisplayName } from '../../models';
 
 var GroupRecipientDetailWithoutAccess = function GroupRecipientDetailWithoutAccess(_ref) {
-  var withoutAccess = _ref.withoutAccess;
+  var withoutAccess = _ref.withoutAccess,
+      isOwner = _ref.isOwner;
 
   var _useI18n = useI18n(),
       t = _useI18n.t;
@@ -20,10 +22,12 @@ var GroupRecipientDetailWithoutAccess = function GroupRecipientDetailWithoutAcce
     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);
+    var defaultDisplayName = t(DEFAULT_DISPLAY_NAME);
+    var name = getDisplayName(recipient, defaultDisplayName);
     return /*#__PURE__*/React.createElement(ListItem, {
       disableGutters: true,
-      key: recipient.index
+      key: recipient.index,
+      ellipsis: false
     }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Avatar, {
       text: getInitials(recipient),
       textId: name
@@ -37,7 +41,7 @@ var GroupRecipientDetailWithoutAccess = function GroupRecipientDetailWithoutAcce
         style: {
           marginRight: '0.25rem'
         }
-      }) : null, t("GroupRecipientDetail.withoutAccess.status.".concat(recipient.status)))
+      }) : null, t("GroupRecipientDetail.withoutAccess.status.".concat(recipient.status)), isOwner ? " - ".concat(t('GroupRecipientDetail.withoutAccess.addEmail')) : null)
     }));
   })));
 };

package/dist/components/Recipient/GroupRecipientPermissions.js

@@ -2,7 +2,6 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useState, useRef } from 'react';
-import { useClient } from 'cozy-client';
 import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu';
 import { makeActions, divider } from 'cozy-ui/transpiled/react/ActionsMenu/Actions';
 import ActionsMenuMobileHeader from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuMobileHeader';
@@ -19,18 +18,17 @@ import { GroupAvatar } from '../Avatar/GroupAvatar';
 var GroupRecipientPermissions = function GroupRecipientPermissions(_ref) {
   var name = _ref.name,
       isOwner = _ref.isOwner,
-      instance = _ref.instance,
       sharingId = _ref.sharingId,
       groupIndex = _ref.groupIndex,
       _ref$read_only = _ref.read_only,
       isReadOnly = _ref$read_only === void 0 ? false : _ref$read_only,
-      className = _ref.className;
+      className = _ref.className,
+      isUserInsideMembers = _ref.isUserInsideMembers;
 
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
   var buttonRef = useRef();
-  var client = useClient();
 
   var _useSharingContext = useSharingContext(),
       revokeGroup = _useSharingContext.revokeGroup,
@@ -46,8 +44,7 @@ var GroupRecipientPermissions = function GroupRecipientPermissions(_ref) {
       revoking = _useState4[0],
       setRevoking = _useState4[1];
 
-  var instanceMatchesClient = instance !== undefined && instance === client.options.uri;
-  var shouldShowMenu = !revoking && (instanceMatchesClient && !isOwner || isOwner);
+  var shouldShowMenu = !revoking && (isOwner || isUserInsideMembers);
 
   var toggleMenu = function toggleMenu() {
     return setMenuDisplayed(!isMenuDisplayed);

package/dist/components/Recipient/MemberRecipient.js

@@ -14,10 +14,9 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import MemberRecipientPermissions from './MemberRecipientPermissions';
 import MemberRecipientStatus from './MemberRecipientStatus';
 import RecipientConfirm from './RecipientConfirm';
-import { FADE_IN_DURATION } from '../../helpers/recipients';
+import { FADE_IN_DURATION, DEFAULT_DISPLAY_NAME } from '../../helpers/recipients';
 import { getDisplayName } from '../../models';
 import { MemberAvatar } from '../Avatar/MemberAvatar';
-var DEFAULT_DISPLAY_NAME = 'Share.contacts.defaultDisplayName';
 
 var MemberRecipient = function MemberRecipient(props) {
   var _useI18n = useI18n(),

package/dist/components/Recipient/MemberRecipientPermissions.js

@@ -85,7 +85,7 @@ var MemberRecipientPermissions = function MemberRecipientPermissions(_ref) {
   })), [isOwner, onRevoke, onRevokeSelf, document, sharingId, memberIndex]);
   var actions = makeActions([permission, divider, revokeMember], {
     t: t,
-    type: type,
+    type: type !== null && type !== void 0 ? type : 'one-way',
     isOwner: isOwner,
     handleRevocation: handleRevocation
   });

package/dist/components/ShareAutosuggest.js

@@ -7,9 +7,10 @@ import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import Chip from 'cozy-ui/transpiled/react/Chips';
 import { Spinner } from 'cozy-ui/transpiled/react/Spinner';
 import palette from 'cozy-ui/transpiled/react/palette';
+import { GroupAvatar } from './Avatar/GroupAvatar';
 import ContactSuggestion from './ContactSuggestion';
 import { extractEmails, validateEmail } from '../helpers/email';
-import { getDisplayName, getInitials, Contact } from '../models';
+import { getDisplayName, getInitials, Contact, Group } from '../models';
 var styles = {
   "container": "autosuggest__container___1Yro7",
   "suggestionsContainer": "autosuggest__suggestionsContainer___3EDuG",
@@ -26,7 +27,6 @@ var ShareAutocomplete = function ShareAutocomplete(_ref) {
   var loading = _ref.loading,
       contactsAndGroups = _ref.contactsAndGroups,
       recipients = _ref.recipients,
-      onFocus = _ref.onFocus,
       onPick = _ref.onPick,
       onRemove = _ref.onRemove,
       placeholder = _ref.placeholder;
@@ -46,6 +46,11 @@ var ShareAutocomplete = function ShareAutocomplete(_ref) {
       isPasted = _useState6[0],
       setIsPasted = _useState6[1];
 
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isLoadingDisplayed = _useState8[0],
+      setLoadingDisplayed = _useState8[1];
+
   var autosuggestRef = useRef(null);
 
   var computeSuggestions = function computeSuggestions(value) {
@@ -118,7 +123,8 @@ var ShareAutocomplete = function ShareAutocomplete(_ref) {
   };
 
   var onAutosuggestFocus = function onAutosuggestFocus() {
-    onFocus();
+    // We only show the loading state when the user has focus on the input
+    setLoadingDisplayed(true);
   };
 
   var onAutosuggestBlur = function onAutosuggestBlur() {
@@ -148,12 +154,15 @@ var ShareAutocomplete = function ShareAutocomplete(_ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: styles['recipientsContainer']
     }, recipients.map(function (recipient, idx) {
+      var isContactGroup = recipient._type === Group.doctype;
       var avatarText = getInitials(recipient);
       var name = getDisplayName(recipient);
       return /*#__PURE__*/React.createElement(Chip, {
         id: "recipient_".concat(idx),
         key: "key_recipient_".concat(idx),
-        avatar: /*#__PURE__*/React.createElement(Avatar, {
+        avatar: isContactGroup ? /*#__PURE__*/React.createElement(GroupAvatar, {
+          size: "xsmall"
+        }) : /*#__PURE__*/React.createElement(Avatar, {
           text: avatarText,
           size: "xsmall"
         }),
@@ -166,10 +175,9 @@ var ShareAutocomplete = function ShareAutocomplete(_ref) {
     }), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
       onKeyPress: onKeyPress,
       onKeyUp: onKeyUp
-    })), loading && /*#__PURE__*/React.createElement(Spinner, {
-      color: palette.dodgerBlue,
-      className: "u-flex u-flex-items-center"
-    }));
+    })), loading && isLoadingDisplayed ? /*#__PURE__*/React.createElement(Spinner, {
+      color: palette.dodgerBlue
+    }) : null);
   };
 
   var renderSuggestion = function renderSuggestion(contactOrGroup) {
@@ -206,7 +214,6 @@ ShareAutocomplete.propTypes = {
   loading: PropTypes.bool,
   contactsAndGroups: PropTypes.array,
   recipients: PropTypes.array.isRequired,
-  onFocus: PropTypes.func.isRequired,
   onPick: PropTypes.func.isRequired,
   onRemove: PropTypes.func.isRequired,
   placeholder: PropTypes.string

package/dist/components/ShareAutosuggest.spec.js

@@ -1,26 +1,38 @@
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 import ShareAutosuggest from './ShareAutosuggest';
 import AppLike from '../../test/AppLike';
+jest.mock('cozy-ui/transpiled/react/Spinner', function () {
+  return {
+    Spinner: function Spinner() {
+      return /*#__PURE__*/React.createElement("div", null, "loading");
+    }
+  };
+});
 describe('ShareAutosuggest', function () {
-  it('tests if ShareAutosuggest calls onFocus and onPick', function () {
-    var onPick = jest.fn();
-    var onFocus = jest.fn();
-    var onRemove = jest.fn();
-
-    var _render = render( /*#__PURE__*/React.createElement(AppLike, null, /*#__PURE__*/React.createElement(ShareAutosuggest, {
+  var setup = function setup(_ref) {
+    var onPick = _ref.onPick,
+        onRemove = _ref.onRemove,
+        _ref$loading = _ref.loading,
+        loading = _ref$loading === void 0 ? false : _ref$loading;
+    render( /*#__PURE__*/React.createElement(AppLike, null, /*#__PURE__*/React.createElement(ShareAutosuggest, {
+      loading: loading,
       contactsAndGroups: [],
       placeholder: "myPlaceHolder",
       onPick: onPick,
-      onFocus: onFocus,
       recipients: [],
       onRemove: onRemove
-    }))),
-        getByPlaceholderText = _render.getByPlaceholderText;
+    })));
+  };
 
-    var inputNode = getByPlaceholderText('myPlaceHolder');
-    inputNode.focus();
-    expect(onFocus).toHaveBeenCalled(); // It should not call onPick if the value is not an email
+  it('tests if ShareAutosuggest calls onPick', function () {
+    var onPick = jest.fn();
+    var onRemove = jest.fn();
+    setup({
+      onPick: onPick,
+      onRemove: onRemove
+    });
+    var inputNode = screen.getByPlaceholderText('myPlaceHolder'); // It should not call onPick if the value is not an email
 
     fireEvent.change(inputNode, {
       target: {
@@ -66,4 +78,17 @@ describe('ShareAutosuggest', function () {
       email: 'quentin.valmori@cozycloud.cc'
     });
   });
+  it('should show loading only after user focus input', function () {
+    var onPick = jest.fn();
+    var onRemove = jest.fn();
+    setup({
+      onPick: onPick,
+      onRemove: onRemove,
+      loading: true
+    });
+    var inputNode = screen.getByPlaceholderText('myPlaceHolder');
+    expect(screen.queryByText('loading')).toBeNull();
+    fireEvent.focus(inputNode);
+    expect(screen.getByText('loading')).toBeInTheDocument();
+  });
 });

package/dist/components/ShareAutosuggest.stories.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import ShareAutosuggest from './ShareAutosuggest';
+var meta = {
+  component: ShareAutosuggest,
+  args: {}
+};
+export default meta;
+
+var ShareAutosuggestRender = function ShareAutosuggestRender(props) {
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      recipients = _useState2[0],
+      setRecipients = _useState2[1];
+
+  var onPick = function onPick(contactOrGroup) {
+    setRecipients([].concat(_toConsumableArray(recipients), [contactOrGroup]));
+  };
+
+  var onRemove = function onRemove(contactOrGroup) {
+    setRecipients(recipients.filter(function (r) {
+      return r.id !== contactOrGroup.id;
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(ShareAutosuggest, _extends({}, props, {
+    recipients: recipients,
+    onPick: onPick,
+    onRemove: onRemove
+  }));
+};
+
+export var Default = {
+  name: 'Default',
+  render: ShareAutosuggestRender,
+  args: {
+    loading: false,
+    contactsAndGroups: [{
+      id: 'group1',
+      name: 'Family',
+      _type: 'io.cozy.contacts.groups',
+      members: [{
+        id: 'contact1',
+        name: 'John Doe',
+        _type: 'io.cozy.contacts'
+      }, {
+        id: 'contact2',
+        name: 'Jane Doe',
+        _type: 'io.cozy.contacts'
+      }]
+    }, {
+      id: 'contact3',
+      name: 'Alice Wonderland',
+      _type: 'io.cozy.contacts',
+      email: 'alice@wonder.land'
+    }],
+    placeholder: 'Type a name or email address'
+  }
+};