cozy-sharing 40.1.9 → 40.2.1

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [40.2.1](https://github.com/cozy/cozy-libs/compare/cozy-sharing@40.2.0...cozy-sharing@40.2.1) (2026-10-28)
+
+**Note:** Version bump only for package cozy-sharing
+
+# [40.2.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@40.1.9...cozy-sharing@40.2.0) (2026-10-28)
+
+### Bug Fixes
+
+- **cozy-sharing:** Ignore the email case when filtering suggestions ([4057cf0](https://github.com/cozy/cozy-libs/commit/4057cf010f54c646d8518aa787e03be445b60df2))
+
+### Features
+
+- **cozy-sharing:** Suggest recipients from the stack ([8b06972](https://github.com/cozy/cozy-libs/commit/8b0697256b118c365ca9f7315aae3f00eef6ebd6)), closes [linagora/twake-workplace-private#1929](https://github.com/linagora/twake-workplace-private/issues/1929)
+
 ## [40.1.9](https://github.com/cozy/cozy-libs/compare/cozy-sharing@40.1.8...cozy-sharing@40.1.9) (2026-10-28)
 
 ### Bug Fixes

package/README.md

@@ -40,6 +40,7 @@ import SharingProvider from 'cozy-sharing'
 | `onShared` | no | Callback fired after a share is created |
 | `isPublic` | no | Set to `true` when rendering a public page (disables fetching) |
 | `previewPath` | no | Custom preview path sent to the share creation |
+| `contactsSuggestEnabled` | no | Suggest the recipients with `GET /contacts/suggest` instead of loading every contact |
 
 ### Built-in components
 

package/dist/SharingOwnerAvatar.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["docId"];
 import React from 'react';
-import { MemberAvatar } from './components/Avatar/MemberAvatar';
+import { MemberAvatarWrapper } from './components/Avatar/MemberAvatarWrapper';
 import SharingContext from './context';
 import withLocales from './hoc/withLocales';
 export var SharingOwnerAvatar = withLocales(function (_ref) {
@@ -14,7 +14,7 @@ export var SharingOwnerAvatar = withLocales(function (_ref) {
         byDocId = _ref2.byDocId,
         getOwner = _ref2.getOwner;
 
-    return !byDocId || !byDocId[docId] ? null : /*#__PURE__*/React.createElement(MemberAvatar, _extends({
+    return !byDocId || !byDocId[docId] ? null : /*#__PURE__*/React.createElement(MemberAvatarWrapper, _extends({
       recipient: getOwner(docId)
     }, rest));
   });

package/dist/SharingProvider.js

@@ -1451,7 +1451,9 @@ export var SharingProvider = /*#__PURE__*/function (_Component) {
       // but if we don't, consumers don't rerender when the state changes after loading the sharings,
       // probably because the state object remains the same...
       return /*#__PURE__*/React.createElement(SharingContext.Provider, {
-        value: _objectSpread({}, this.state)
+        value: _objectSpread(_objectSpread({}, this.state), {}, {
+          contactsSuggestEnabled: this.props.contactsSuggestEnabled
+        })
       }, this.props.children);
     }
   }]);

package/dist/components/Avatar/AvatarList.js

@@ -6,7 +6,7 @@ import { useClient } from 'cozy-client';
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import { ExtraAvatar } from './ExtraAvatar';
 import { GroupAvatar } from './GroupAvatar';
-import { MemberAvatar } from './MemberAvatar';
+import { MemberAvatarWrapper } from './MemberAvatarWrapper';
 import { getDisplayName } from '../../models';
 var styles = {
   "recipient": "recipient__recipient___2DmZI",
@@ -96,7 +96,7 @@ var AvatarList = function AvatarList(_ref2) {
     return /*#__PURE__*/React.createElement("span", {
       "data-testid": "AvatarList-avatar".concat(recipient.status === 'owner' ? '-owner' : ''),
       key: recipient.index
-    }, /*#__PURE__*/React.createElement(MemberAvatar, {
+    }, /*#__PURE__*/React.createElement(MemberAvatarWrapper, {
       recipient: recipient,
       size: size
     }));

package/dist/components/Avatar/MemberAvatar.js

@@ -1,49 +1,25 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["recipient"];
+var _excluded = ["recipient", "avatarUrl"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useState } from 'react';
-import { useClient } from 'cozy-client';
-import { getPrimaryCozy } from 'cozy-client/dist/models/contact';
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import logger from '../../logger';
 import { getInitials } from '../../models';
-/**
- * makeAvatarUrl derives the avatar image URL for the recipient.
- * - If the recipient has an avatarPath (sharing context), it is
- *   used directly with a base URI prefix (unless it is already
- *   a full URL for a remote Cozy).
- * - If the recipient has no avatarPath but has a cozy URL
- *   (contact context), it points to that Cozy's public avatar.
- * - The status is used as a cache-buster in the URL so the
- *   browser refreshes the image when the sharing status changes.
- *   For non-sharing recipients, 'contact' is the stable default.
- */
-
-var makeAvatarUrl = function makeAvatarUrl(recipient, instanceUri) {
-  var avatarPath = recipient.avatarPath;
-  var cozyUrl = !avatarPath ? getPrimaryCozy(recipient) : null;
-  if (!avatarPath && !cozyUrl) return null;
-  var finalPath = avatarPath || "".concat(cozyUrl.replace(/\/$/, ''), "/public/avatar?fallback=initials");
-  var status = recipient.status || 'contact';
-  var isFullPath = finalPath.startsWith('http');
-  var base = isFullPath ? '' : instanceUri;
-  return "".concat(base).concat(finalPath).concat(finalPath.includes('?') ? '&' : '?', "v=").concat(status);
-};
 
 var MemberAvatar = function MemberAvatar(_ref) {
   var recipient = _ref.recipient,
+      avatarUrl = _ref.avatarUrl,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var client = useClient(); // Remember which image url failed to load so we can fall back to the
+  // Remember which image url failed to load so we can fall back to the
   // initials. Storing the url (instead of a boolean) means a new url is
   // retried automatically, without an effect to reset the error state.
-
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
       erroredSrc = _useState2[0],
@@ -59,19 +35,18 @@ var MemberAvatar = function MemberAvatar(_ref) {
       recipient: recipient
     }, rest));
     return null;
-  }
-
-  var image = makeAvatarUrl(recipient, client.options.uri); // The avatar can become unreachable (eg. the related sharing is revoked
+  } // The avatar can become unreachable (eg. the related sharing is revoked
   // while its members are still rendered), in which case the image request
   // fails. Without a fallback the browser shows a broken-image icon, so we
   // render the initials instead.
 
-  return /*#__PURE__*/React.createElement(Avatar, rest, image && erroredSrc !== image ? /*#__PURE__*/React.createElement("img", {
+
+  return /*#__PURE__*/React.createElement(Avatar, rest, avatarUrl && erroredSrc !== avatarUrl ? /*#__PURE__*/React.createElement("img", {
     width: "100%",
     height: "100%",
-    src: image,
+    src: avatarUrl,
     onError: function onError() {
-      return setErroredSrc(image);
+      return setErroredSrc(avatarUrl);
     }
   }) : getInitials(recipient));
 };

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

@@ -1,19 +1,13 @@
 import { render, fireEvent } from '@testing-library/react';
 import React from 'react';
-import { createMockClient } from 'cozy-client';
 import { MemberAvatar } from './MemberAvatar';
 import AppLike from '../../../test/AppLike';
 describe('MemberAvatar', function () {
-  var client = createMockClient({});
-  client.options = {
-    uri: 'http://cozy.example.com'
-  };
-
   var setup = function setup(recipient) {
-    return render( /*#__PURE__*/React.createElement(AppLike, {
-      client: client
-    }, /*#__PURE__*/React.createElement(MemberAvatar, {
-      recipient: recipient
+    var avatarUrl = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    return render( /*#__PURE__*/React.createElement(AppLike, null, /*#__PURE__*/React.createElement(MemberAvatar, {
+      recipient: recipient,
+      avatarUrl: avatarUrl
     })));
   };
 
@@ -26,92 +20,38 @@ describe('MemberAvatar', function () {
     expect(container.querySelector('[class*="MuiAvatar-root"]')).toBeNull();
     expect(container.querySelector('img')).toBeNull();
   });
-  it('renders the avatar image when the recipient has an avatarPath and a status', function () {
+  it('renders the avatar image', function () {
     var _setup2 = setup({
       public_name: 'Bob',
-      status: 'owner',
-      avatarPath: '/sharings/123/recipients/0/avatar'
-    }),
+      status: 'owner'
+    }, 'http://cozy.example.com/sharings/123/recipients/0/avatar?v=owner'),
         container = _setup2.container;
 
-    var img = container.querySelector('img');
-    expect(img).toBeTruthy();
-    expect(img.getAttribute('src')).toBe('http://cozy.example.com/sharings/123/recipients/0/avatar?v=owner');
+    expect(container.querySelector('img').getAttribute('src')).toBe('http://cozy.example.com/sharings/123/recipients/0/avatar?v=owner');
   });
-  it('appends the cache-busting param with & when avatarPath already has a query string', function () {
+  it('renders the initials when there is no avatar URL', function () {
     var _setup3 = setup({
-      public_name: 'Bob',
-      status: 'owner',
-      avatarPath: '/public/avatar?fallback=initials'
-    }),
-        container = _setup3.container;
-
-    expect(container.querySelector('img').getAttribute('src')).toBe('http://cozy.example.com/public/avatar?fallback=initials&v=owner');
-  });
-  it('renders a full URL avatarPath without prefixing the local instance URI', function () {
-    var _setup4 = setup({
-      public_name: 'Jon Snow',
-      status: 'contact',
-      avatarPath: 'https://jonsnow.mycozy.cloud/public/avatar?fallback=initials'
-    }),
-        container = _setup4.container;
-
-    expect(container.querySelector('img').getAttribute('src')).toBe('https://jonsnow.mycozy.cloud/public/avatar?fallback=initials&v=contact');
-  });
-  it('derives avatarPath from cozy URL when avatarPath is not set', function () {
-    var _setup5 = setup({
-      _type: 'io.cozy.contacts',
-      name: {
-        givenName: 'Jon',
-        familyName: 'Snow'
-      },
-      cozy: [{
-        url: 'https://jonsnow.mycozy.cloud'
-      }]
-    }),
-        container = _setup5.container;
-
-    var img = container.querySelector('img');
-    expect(img).toBeTruthy();
-    expect(img.getAttribute('src')).toBe('https://jonsnow.mycozy.cloud/public/avatar?fallback=initials&v=contact');
-  });
-  it('renders initials when there is no avatarPath and no cozy URL', function () {
-    var _setup6 = setup({
       _type: 'io.cozy.contacts',
       name: {
         givenName: 'Jon',
         familyName: 'Snow'
       }
     }),
-        container = _setup6.container,
-        getByText = _setup6.getByText;
+        container = _setup3.container,
+        getByText = _setup3.getByText;
 
     expect(container.querySelector('img')).toBeNull();
     expect(getByText('JS')).toBeTruthy();
   });
-  it('renders the initials when there is no avatarPath', function () {
-    var _setup7 = setup({
-      public_name: 'Bob',
-      status: 'owner'
-    }),
-        container = _setup7.container,
-        getByText = _setup7.getByText;
-
-    expect(container.querySelector('img')).toBeNull();
-    expect(getByText('B')).toBeTruthy();
-  });
   it('falls back to the initials when the avatar image fails to load', function () {
-    var _setup8 = setup({
+    var _setup4 = setup({
       public_name: 'Bob',
-      status: 'owner',
-      avatarPath: '/sharings/123/recipients/0/avatar'
-    }),
-        container = _setup8.container,
-        getByText = _setup8.getByText;
+      status: 'owner'
+    }, 'http://cozy.example.com/sharings/123/recipients/0/avatar?v=owner'),
+        container = _setup4.container,
+        getByText = _setup4.getByText;
 
-    var img = container.querySelector('img');
-    expect(img).toBeTruthy();
-    fireEvent.error(img);
+    fireEvent.error(container.querySelector('img'));
     expect(container.querySelector('img')).toBeNull();
     expect(getByText('B')).toBeTruthy();
   });

package/dist/components/Avatar/MemberAvatarWrapper.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["recipient"];
+import React from 'react';
+import { useClient } from 'cozy-client';
+import { MemberAvatar } from './MemberAvatar';
+import { makeAvatarUrl } from '../../helpers/recipients';
+
+var MemberAvatarWrapper = function MemberAvatarWrapper(_ref) {
+  var recipient = _ref.recipient,
+      avatarProps = _objectWithoutProperties(_ref, _excluded);
+
+  var client = useClient();
+  return /*#__PURE__*/React.createElement(MemberAvatar, _extends({
+    recipient: recipient,
+    avatarUrl: recipient ? makeAvatarUrl(recipient, client.options.uri) : null
+  }, avatarProps));
+};
+
+export { MemberAvatarWrapper };

package/dist/components/ConfirmTrustedRecipientsDialog.js

@@ -2,12 +2,14 @@ import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructurin
 import _extends from "@babel/runtime/helpers/extends";
 import cx from 'classnames';
 import React from 'react';
+import { useClient } from 'cozy-client';
 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 'twake-i18n';
 import MemberRecipient from './Recipient/MemberRecipient';
 import ShareDialogTwoStepsConfirmationContainer from './ShareDialogTwoStepsConfirmationContainer';
+import { makeAvatarUrl } from '../helpers/recipients';
 /**
  * Displays the sharing interface that can be used when ConfirmTrustedRecipientsDialog is in sharing state
  */
@@ -22,6 +24,7 @@ var SharingContent = function SharingContent(_ref) {
   var _useBreakpoints = useBreakpoints(),
       isMobile = _useBreakpoints.isMobile;
 
+  var client = useClient();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
     variant: "body1",
     className: cx('u-mb-half', isMobile ? 'u-ph-1 u-mt-1' : 'u-ph-2 u-mt-1-half')
@@ -32,7 +35,8 @@ var SharingContent = function SharingContent(_ref) {
       key: "key_r_".concat(recipientConfirmationData.id),
       isOwner: false,
       recipientConfirmationData: recipientConfirmationData,
-      verifyRecipient: verifyRecipient
+      verifyRecipient: verifyRecipient,
+      avatarUrl: makeAvatarUrl(recipientConfirmationData, client.options.uri)
     }));
   })));
 };

package/dist/components/ContactSuggestion.js

@@ -9,7 +9,8 @@ import { DOCTYPE_GROUPS, contactPropType, groupPropType, getDisplayName } from '
 import { GroupAvatar } from './Avatar/GroupAvatar';
 import { MemberAvatar } from './Avatar/MemberAvatar';
 export var ContactSuggestion = function ContactSuggestion(_ref) {
-  var contactOrGroup = _ref.contactOrGroup;
+  var contactOrGroup = _ref.contactOrGroup,
+      avatarUrl = _ref.avatarUrl;
 
   var _useI18n = useI18n(),
       t = _useI18n.t;
@@ -34,6 +35,7 @@ export var ContactSuggestion = function ContactSuggestion(_ref) {
     button: true
   }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(MemberAvatar, {
     recipient: contactOrGroup,
+    avatarUrl: avatarUrl,
     size: "m"
   })), /*#__PURE__*/React.createElement(ListItemText, {
     primary: name,
@@ -46,6 +48,7 @@ var newUnknownContactProptypes = PropTypes.shape({
 });
 ContactSuggestion.propTypes = {
   contactOrGroup: PropTypes.oneOfType([contactPropType, groupPropType, newUnknownContactProptypes]).isRequired,
-  contacts: PropTypes.arrayOf(contactPropType)
+  contacts: PropTypes.arrayOf(contactPropType),
+  avatarUrl: PropTypes.string
 };
 export default ContactSuggestion;

package/dist/components/Recipient/MemberRecipient.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["instance", "isOwner", "status", "isCurrentUser", "recipientConfirmationData", "verifyRecipient", "fadeIn", "isOrgSharedDrive"];
+var _excluded = ["instance", "isOwner", "status", "isCurrentUser", "recipientConfirmationData", "verifyRecipient", "fadeIn", "isOrgSharedDrive", "avatarUrl"];
 import PropTypes from 'prop-types';
 import React from 'react';
 import Fade from 'cozy-ui/transpiled/react/Fade';
@@ -33,6 +33,7 @@ var MemberRecipient = function MemberRecipient(props) {
       verifyRecipient = props.verifyRecipient,
       fadeIn = props.fadeIn,
       isOrgSharedDrive = props.isOrgSharedDrive,
+      avatarUrl = props.avatarUrl,
       rest = _objectWithoutProperties(props, _excluded);
 
   var isMe = isOwner && status === 'owner' || isCurrentUser;
@@ -55,7 +56,8 @@ var MemberRecipient = function MemberRecipient(props) {
     size: "small"
   }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(MemberAvatar, {
     size: "m",
-    recipient: props
+    recipient: props,
+    avatarUrl: avatarUrl
   })), /*#__PURE__*/React.createElement(ListItemText, {
     primary: /*#__PURE__*/React.createElement(Typography, {
       variant: "body1"
@@ -78,6 +80,7 @@ MemberRecipient.propTypes = {
   isCurrentUser: PropTypes.bool,
   recipientConfirmationData: PropTypes.object,
   verifyRecipient: PropTypes.func,
-  isOrgSharedDrive: PropTypes.bool
+  isOrgSharedDrive: PropTypes.bool,
+  avatarUrl: PropTypes.string
 };
 export default MemberRecipient;

package/dist/components/Recipient/MemberRecipient.spec.js

@@ -2,19 +2,11 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { render, fireEvent } from '@testing-library/react';
 import React from 'react';
-import { createMockClient } from 'cozy-client';
 import MemberRecipient from './MemberRecipient';
 import AppLike from '../../../test/AppLike';
 describe('MemberRecipient component', function () {
-  var client = createMockClient({});
-  client.options = {
-    uri: 'foo.mycozy.cloud'
-  };
-
   var setup = function setup(props) {
-    return render( /*#__PURE__*/React.createElement(AppLike, {
-      client: client
-    }, /*#__PURE__*/React.createElement(MemberRecipient, props)));
+    return render( /*#__PURE__*/React.createElement(AppLike, null, /*#__PURE__*/React.createElement(MemberRecipient, props)));
   };
 
   var createRangeBackup;

package/dist/components/Recipient/MemberRecipientLite.js

@@ -13,7 +13,7 @@ import MemberRecipientStatus from './MemberRecipientStatus';
 import { DEFAULT_DISPLAY_NAME } from '../../helpers/recipients';
 import withLocales from '../../hoc/withLocales';
 import { getDisplayName } from '../../models';
-import { MemberAvatar } from '../Avatar/MemberAvatar';
+import { MemberAvatarWrapper } from '../Avatar/MemberAvatarWrapper';
 
 var MemberRecipientLite = function MemberRecipientLite(_ref) {
   var _recipient$type;
@@ -31,7 +31,7 @@ var MemberRecipientLite = function MemberRecipientLite(_ref) {
   return /*#__PURE__*/React.createElement(ListItem, {
     size: "small",
     ellipsis: true
-  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(MemberAvatar, _extends({
+  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(MemberAvatarWrapper, _extends({
     size: "m",
     recipient: recipient
   }, props))), /*#__PURE__*/React.createElement(ListItemText, {

package/dist/components/Recipient/PermissionTypeMenuWrapper.spec.js

@@ -208,7 +208,9 @@ describe('PermissionTypeMenu component', function () {
       }]
     };
     beforeEach(function () {
-      flag.mockReturnValue(true);
+      flag.mockImplementation(function (name) {
+        return name === 'drive.federated-shared-folder.enabled';
+      });
       mockHasSharedParent.mockReturnValue(true);
       mockGetSharingById.mockReturnValue({
         id: 'sharing-123',

package/dist/components/ShareAutosuggest.js

@@ -1,7 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import PropTypes from 'prop-types';
-import React, { useState, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import Autosuggest from 'react-autosuggest';
 import Chip from 'cozy-ui/transpiled/react/Chips';
 import { Spinner } from 'cozy-ui/transpiled/react/Spinner';
@@ -10,6 +13,7 @@ import { MemberAvatar } from './Avatar/MemberAvatar';
 import ContactSuggestion from './ContactSuggestion';
 import { isContactToBeCreated } from '../helpers/contacts';
 import { extractEmails, validateEmail } from '../helpers/email';
+import logger from '../logger';
 import { getDisplayName, DOCTYPE_CONTACTS, DOCTYPE_GROUPS } from '../models';
 var styles = {
   "container": "autosuggest__container___1Yro7",
@@ -24,6 +28,8 @@ var styles = {
   "endAdornment": "autosuggest__endAdornment___2EwTN"
 };
 import { contactOrGroupMatch } from '../suggestionMatchers';
+var FETCH_CONTACTS_DEBOUNCE = 300;
+var FETCH_CONTACTS_MIN_LENGTH = 3;
 
 var ShareAutosuggest = function ShareAutosuggest(_ref) {
   var loading = _ref.loading,
@@ -35,7 +41,9 @@ var ShareAutosuggest = function ShareAutosuggest(_ref) {
       enableCreateContact = _ref.enableCreateContact,
       placeholder = _ref.placeholder,
       autoFocus = _ref.autoFocus,
-      endAdornment = _ref.endAdornment;
+      endAdornment = _ref.endAdornment,
+      fetchContacts = _ref.fetchContacts,
+      getAvatarUrl = _ref.getAvatarUrl;
 
   var _useState = useState(''),
       _useState2 = _slicedToArray(_useState, 2),
@@ -57,8 +65,20 @@ var ShareAutosuggest = function ShareAutosuggest(_ref) {
       isLoadingDisplayed = _useState8[0],
       setLoadingDisplayed = _useState8[1];
 
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isFetching = _useState10[0],
+      setIsFetching = _useState10[1];
+
   var autosuggestRef = useRef(null);
   var containerRef = useRef(null);
+  var fetchTimeoutRef = useRef(null);
+  var fetchedValueRef = useRef(null);
+  useEffect(function () {
+    return function () {
+      return clearTimeout(fetchTimeoutRef.current);
+    };
+  }, []);
 
   var computeSuggestions = function computeSuggestions(value) {
     var inputValue = value.trim().toLowerCase();
@@ -67,10 +87,7 @@ var ShareAutosuggest = function ShareAutosuggest(_ref) {
     });
   };
 
-  var onSuggestionsFetchRequested = function onSuggestionsFetchRequested(_ref2) {
-    var value = _ref2.value;
-    var computedSuggestions = computeSuggestions(value);
-
+  var showSuggestions = function showSuggestions(computedSuggestions, value) {
     if (computedSuggestions.length > 0) {
       setSuggestions(computedSuggestions);
     } else if (enableCreateContact && validateEmail(value)) {
@@ -83,7 +100,63 @@ var ShareAutosuggest = function ShareAutosuggest(_ref) {
     }
   };
 
+  var onSuggestionsFetchRequested = function onSuggestionsFetchRequested(_ref2) {
+    var value = _ref2.value;
+    var computedSuggestions = computeSuggestions(value);
+    clearTimeout(fetchTimeoutRef.current);
+    fetchedValueRef.current = value;
+
+    if (!fetchContacts || value.trim().length < FETCH_CONTACTS_MIN_LENGTH) {
+      setIsFetching(false);
+      showSuggestions(computedSuggestions, value);
+      return;
+    }
+
+    setIsFetching(true);
+    fetchTimeoutRef.current = setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var contacts;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            contacts = [];
+            _context.prev = 1;
+            _context.next = 4;
+            return fetchContacts(value.trim());
+
+          case 4:
+            contacts = _context.sent;
+            _context.next = 10;
+            break;
+
+          case 7:
+            _context.prev = 7;
+            _context.t0 = _context["catch"](1);
+            logger.error('Failed to fetch contact suggestions', _context.t0);
+
+          case 10:
+            if (!(fetchedValueRef.current !== value)) {
+              _context.next = 12;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 12:
+            setIsFetching(false);
+            showSuggestions([].concat(_toConsumableArray(contacts), _toConsumableArray(computedSuggestions)), value);
+
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 7]]);
+    })), FETCH_CONTACTS_DEBOUNCE);
+  };
+
   var onSuggestionsClearRequested = function onSuggestionsClearRequested() {
+    clearTimeout(fetchTimeoutRef.current);
+    fetchedValueRef.current = null;
+    setIsFetching(false);
     setSuggestions([]);
   };
 
@@ -91,9 +164,9 @@ var ShareAutosuggest = function ShareAutosuggest(_ref) {
     setIsPasted(true);
   };
 
-  var onAutosuggestChange = function onAutosuggestChange(event, _ref3) {
-    var newValue = _ref3.newValue,
-        method = _ref3.method;
+  var onAutosuggestChange = function onAutosuggestChange(event, _ref4) {
+    var newValue = _ref4.newValue,
+        method = _ref4.method;
 
     if (isPasted) {
       var emails = extractEmails(newValue);
@@ -126,9 +199,9 @@ var ShareAutosuggest = function ShareAutosuggest(_ref) {
     }
   };
 
-  var onKeyUp = function onKeyUp(_ref4) {
-    var key = _ref4.key,
-        keyCode = _ref4.keyCode;
+  var onKeyUp = function onKeyUp(_ref5) {
+    var key = _ref5.key,
+        keyCode = _ref5.keyCode;
 
     if (recipients.length > 0 && inputValue === '' && (key === 'Backspace' || keyCode === 8 || key === 'Delete' || keyCode === 46)) {
       document.getElementById("recipient_".concat(recipients.length - 1)).focus();
@@ -191,7 +264,8 @@ var ShareAutosuggest = function ShareAutosuggest(_ref) {
           color: recipient.color
         }) : /*#__PURE__*/React.createElement(MemberAvatar, {
           size: "xs",
-          recipient: recipient
+          recipient: recipient,
+          avatarUrl: getAvatarUrl(recipient)
         }),
         label: name,
         onDelete: function onDelete() {
@@ -202,7 +276,7 @@ var ShareAutosuggest = function ShareAutosuggest(_ref) {
     }), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
       onKeyPress: onKeyPress,
       onKeyUp: onKeyUp
-    })), loading && isLoadingDisplayed ? /*#__PURE__*/React.createElement(Spinner, {
+    })), (loading || isFetching) && isLoadingDisplayed ? /*#__PURE__*/React.createElement(Spinner, {
       color: "var(--primaryColor)"
     }) : null, endAdornment ? /*#__PURE__*/React.createElement("div", {
       className: styles['endAdornment']
@@ -211,7 +285,8 @@ var ShareAutosuggest = function ShareAutosuggest(_ref) {
 
   var renderSuggestion = function renderSuggestion(contactOrGroup) {
     return /*#__PURE__*/React.createElement(ContactSuggestion, {
-      contactOrGroup: contactOrGroup
+      contactOrGroup: contactOrGroup,
+      avatarUrl: getAvatarUrl(contactOrGroup)
     });
   };
 
@@ -258,6 +333,8 @@ ShareAutosuggest.propTypes = {
   enableCreateContact: PropTypes.bool,
   placeholder: PropTypes.string,
   autoFocus: PropTypes.bool,
-  endAdornment: PropTypes.node
+  endAdornment: PropTypes.node,
+  fetchContacts: PropTypes.func,
+  getAvatarUrl: PropTypes.func.isRequired
 };
 export default ShareAutosuggest;