cozy-sharing 36.3.0 → 36.4.1

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [36.4.1](https://github.com/cozy/cozy-libs/compare/cozy-sharing@36.4.0...cozy-sharing@36.4.1) (2026-07-08)
+
+**Note:** Version bump only for package cozy-sharing
+
+# [36.4.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@36.3.0...cozy-sharing@36.4.0) (2026-07-07)
+
+### Features
+
+- **cozy-sharing:** Expose MemberAvatar in main API ([2af294e](https://github.com/cozy/cozy-libs/commit/2af294e565eb3c727a9d0505e6e5c204f3d8e05c))
+- **cozy-sharing:** MemberAvatar can get avatar image with cozy.url path ([2f694bd](https://github.com/cozy/cozy-libs/commit/2f694bde7c8bd2e30ae9b5c6a51d31e229fec2ef))
+- **cozy-sharing:** Now getInitials return 2 letters if possible ([175ad40](https://github.com/cozy/cozy-libs/commit/175ad40116f6face3bdfdff1642a8d26cdc01596))
+- **cozy-sharing:** Use MemberAvatar in ContactSuggestion ([b03da9f](https://github.com/cozy/cozy-libs/commit/b03da9f1d3f3e23b5b90154c313fd5adbab7aa8a))
+
 # [36.3.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@36.2.1...cozy-sharing@36.3.0) (2026-07-01)
 
 ### Features

package/dist/DoctypeContact.js

@@ -1,6 +1,5 @@
-import { models } from 'cozy-client';
+import { getInitials as clientGetInitials, getDisplayName as clientGetDisplayName } from 'cozy-client/dist/models/contact';
 import { Contact as DoctypeContact } from 'cozy-doctypes';
-var ContactModel = models.contact;
 
 var isContact = function isContact(candidate) {
   return candidate._type === 'io.cozy.contacts';
@@ -10,21 +9,26 @@ export var getInitials = function getInitials(contactOrRecipient) {
   var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
 
   if (isContact(contactOrRecipient)) {
-    return ContactModel.getInitials(contactOrRecipient);
+    return clientGetInitials(contactOrRecipient);
   } else {
     // @todo Extract to RecipientModel ?
-    var s = contactOrRecipient.public_name || contactOrRecipient.name || contactOrRecipient.email;
-    return s && s[0].toUpperCase() || defaultValue;
+    var s = contactOrRecipient.public_name || contactOrRecipient.displayName || contactOrRecipient.name || contactOrRecipient.email;
+    if (!s) return defaultValue;
+    var parts = s.split(' ').filter(Boolean);
+    if (parts.length === 0) return defaultValue;
+    var firstLetter = parts[0][0];
+    var lastLetter = parts.length > 1 ? parts.at(-1)[0] : '';
+    return (firstLetter + lastLetter).toUpperCase();
   }
 };
 export var getDisplayName = function getDisplayName(contact) {
   var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
 
   if (isContact(contact)) {
-    return ContactModel.getDisplayName(contact);
+    return clientGetDisplayName(contact);
   } else {
     // @todo Extract to RecipientModel ?
-    return contact.public_name || contact.name || contact.email || defaultValue;
+    return contact.public_name || contact.displayName || contact.name || contact.email || defaultValue;
   }
 };
 export default DoctypeContact;

package/dist/components/Avatar/MemberAvatar.js

@@ -9,9 +9,32 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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,
@@ -37,19 +60,8 @@ var MemberAvatar = function MemberAvatar(_ref) {
     }, rest));
     return null;
   }
-  /**
-   * avatarPath is always the same for a recipient, but image
-   * can be different since the stack generate it on the fly
-   * because they can be customized by the user.
-   * It can be "gray" during the first load depending of the
-   * status' sharing, but can become active (from the realtime)
-   * so we need a way to "refresh" the image. Passing the
-   * status in the url force the refresh of the image when the
-   * status changes
-   */
-
 
-  var image = recipient.avatarPath && recipient.status ? "".concat(client.options.uri).concat(recipient.avatarPath).concat(recipient.avatarPath.includes('?') ? '&' : '?', "v=").concat(recipient.status) : null; // The avatar can become unreachable (eg. the related sharing is revoked
+  var image = makeAvatarUrl(recipient, client.options.uri); // 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.

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

@@ -48,25 +48,66 @@ describe('MemberAvatar', function () {
 
     expect(container.querySelector('img').getAttribute('src')).toBe('http://cozy.example.com/public/avatar?fallback=initials&v=owner');
   });
-  it('renders the initials when there is no avatarPath', function () {
+  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;
+
+    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 = _setup4.container,
-        getByText = _setup4.getByText;
+        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 _setup5 = setup({
+    var _setup8 = setup({
       public_name: 'Bob',
       status: 'owner',
       avatarPath: '/sharings/123/recipients/0/avatar'
     }),
-        container = _setup5.container,
-        getByText = _setup5.getByText;
+        container = _setup8.container,
+        getByText = _setup8.getByText;
 
     var img = container.querySelector('img');
     expect(img).toBeTruthy();

package/dist/components/ContactSuggestion.js

@@ -1,44 +1,42 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { models } from 'cozy-client';
-import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import { getPrimaryCozy } from 'cozy-client/dist/models/contact';
 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 'twake-i18n';
-import { Contact, Group, getDisplayName, getInitials } from '../models';
+import { Contact, Group, getDisplayName } from '../models';
 import { GroupAvatar } from './Avatar/GroupAvatar';
-var ContactModel = models.contact;
+import { MemberAvatar } from './Avatar/MemberAvatar';
 export var ContactSuggestion = function ContactSuggestion(_ref) {
   var contactOrGroup = _ref.contactOrGroup;
 
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
-  var avatarText, name, details;
-  var isContactGroup = contactOrGroup._type === Group.doctype;
-
-  if (isContactGroup) {
-    name = contactOrGroup.name;
-    avatarText = 'G';
-    details = t('Share.members.count', {
-      smart_count: contactOrGroup.members.length.toString()
-    });
-  } else {
-    name = getDisplayName(contactOrGroup);
-    avatarText = getInitials(contactOrGroup);
-    details = ContactModel.getPrimaryCozy(contactOrGroup);
+  if (contactOrGroup._type === Group.doctype) {
+    return /*#__PURE__*/React.createElement(ListItem, {
+      button: true
+    }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(GroupAvatar, {
+      size: "m"
+    })), /*#__PURE__*/React.createElement(ListItemText, {
+      primary: contactOrGroup.name,
+      secondary: t('Share.members.count', {
+        smart_count: contactOrGroup.members.length.toString()
+      })
+    }));
   }
 
+  var name = getDisplayName(contactOrGroup);
+  var cozyUrl = getPrimaryCozy(contactOrGroup);
   return /*#__PURE__*/React.createElement(ListItem, {
     button: true
-  }, /*#__PURE__*/React.createElement(ListItemIcon, null, isContactGroup ? /*#__PURE__*/React.createElement(GroupAvatar, {
-    size: "m"
-  }) : /*#__PURE__*/React.createElement(Avatar, {
+  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(MemberAvatar, {
+    recipient: contactOrGroup,
     size: "m"
-  }, avatarText)), /*#__PURE__*/React.createElement(ListItemText, {
+  })), /*#__PURE__*/React.createElement(ListItemText, {
     primary: name,
-    secondary: details && details !== '' ? details : '-'
+    secondary: cozyUrl || '-'
   }));
 };
 var newUnknownContactProptypes = PropTypes.shape({

package/dist/index.js

@@ -5,6 +5,7 @@ export default SharingProvider;
 export { SharingContext, withLocales };
 export { useSharingContext } from './hooks/useSharingContext';
 export { useFetchDocumentPath } from './hooks/useFetchDocumentPath';
+export { MemberAvatar } from './components/Avatar/MemberAvatar';
 export { SharedDocument } from './SharedDocument';
 export { SharedStatus } from './SharedStatus';
 export { SharedBadge } from './SharedBadge';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "36.3.0",
+  "version": "36.4.1",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -59,7 +59,7 @@
     "cozy-intent": "^2.31.1",
     "cozy-minilog": "^3.10.1",
     "cozy-ui": "^139.0.2",
-    "cozy-ui-plus": "^10.0.0",
+    "cozy-ui-plus": "^11.0.0",
     "jest": "30.3.0",
     "jest-environment-jsdom": "30.3.0",
     "react": "16.12.0",
@@ -85,5 +85,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "13ca01d79ed7be07410ccc84ebd9a38b112ee0d9"
+  "gitHead": "a093f7a4c39543044dad5fb08b234c651f655518"
 }

package/src/DoctypeContact.js

@@ -1,29 +1,46 @@
-import { models } from 'cozy-client'
+import {
+  getInitials as clientGetInitials,
+  getDisplayName as clientGetDisplayName
+} from 'cozy-client/dist/models/contact'
 import { Contact as DoctypeContact } from 'cozy-doctypes'
-const ContactModel = models.contact
 
 const isContact = candidate => {
   return candidate._type === 'io.cozy.contacts'
 }
 export const getInitials = (contactOrRecipient, defaultValue = '') => {
   if (isContact(contactOrRecipient)) {
-    return ContactModel.getInitials(contactOrRecipient)
+    return clientGetInitials(contactOrRecipient)
   } else {
     // @todo Extract to RecipientModel ?
     const s =
       contactOrRecipient.public_name ||
+      contactOrRecipient.displayName ||
       contactOrRecipient.name ||
       contactOrRecipient.email
-    return (s && s[0].toUpperCase()) || defaultValue
+
+    if (!s) return defaultValue
+
+    const parts = s.split(' ').filter(Boolean)
+    if (parts.length === 0) return defaultValue
+    const firstLetter = parts[0][0]
+    const lastLetter = parts.length > 1 ? parts.at(-1)[0] : ''
+
+    return (firstLetter + lastLetter).toUpperCase()
   }
 }
 
 export const getDisplayName = (contact, defaultValue = '') => {
   if (isContact(contact)) {
-    return ContactModel.getDisplayName(contact)
+    return clientGetDisplayName(contact)
   } else {
     // @todo Extract to RecipientModel ?
-    return contact.public_name || contact.name || contact.email || defaultValue
+    return (
+      contact.public_name ||
+      contact.displayName ||
+      contact.name ||
+      contact.email ||
+      defaultValue
+    )
   }
 }
 

package/src/components/Avatar/MemberAvatar.jsx

@@ -1,11 +1,37 @@
 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.
+ */
+const makeAvatarUrl = (recipient, instanceUri) => {
+  const avatarPath = recipient.avatarPath
+  const cozyUrl = !avatarPath ? getPrimaryCozy(recipient) : null
+  if (!avatarPath && !cozyUrl) return null
+
+  const finalPath =
+    avatarPath ||
+    `${cozyUrl.replace(/\/$/, '')}/public/avatar?fallback=initials`
+  const status = recipient.status || 'contact'
+  const isFullPath = finalPath.startsWith('http')
+  const base = isFullPath ? '' : instanceUri
+  return `${base}${finalPath}${finalPath.includes('?') ? '&' : '?'}v=${status}`
+}
+
 const MemberAvatar = ({ recipient, ...rest }) => {
   const client = useClient()
   // Remember which image url failed to load so we can fall back to the
@@ -23,22 +49,7 @@ const MemberAvatar = ({ recipient, ...rest }) => {
     return null
   }
 
-  /**
-   * avatarPath is always the same for a recipient, but image
-   * can be different since the stack generate it on the fly
-   * because they can be customized by the user.
-   * It can be "gray" during the first load depending of the
-   * status' sharing, but can become active (from the realtime)
-   * so we need a way to "refresh" the image. Passing the
-   * status in the url force the refresh of the image when the
-   * status changes
-   */
-  const image =
-    recipient.avatarPath && recipient.status
-      ? `${client.options.uri}${recipient.avatarPath}${
-          recipient.avatarPath.includes('?') ? '&' : '?'
-        }v=${recipient.status}`
-      : null
+  const image = makeAvatarUrl(recipient, client.options.uri)
 
   // The avatar can become unreachable (eg. the related sharing is revoked
   // while its members are still rendered), in which case the image request

package/src/components/Avatar/MemberAvatar.spec.jsx

@@ -52,6 +52,42 @@ describe('MemberAvatar', () => {
     )
   })
 
+  it('renders a full URL avatarPath without prefixing the local instance URI', () => {
+    const { container } = setup({
+      public_name: 'Jon Snow',
+      status: 'contact',
+      avatarPath: 'https://jonsnow.mycozy.cloud/public/avatar?fallback=initials'
+    })
+
+    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', () => {
+    const { container } = setup({
+      _type: 'io.cozy.contacts',
+      name: { givenName: 'Jon', familyName: 'Snow' },
+      cozy: [{ url: 'https://jonsnow.mycozy.cloud' }]
+    })
+
+    const 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', () => {
+    const { container, getByText } = setup({
+      _type: 'io.cozy.contacts',
+      name: { givenName: 'Jon', familyName: 'Snow' }
+    })
+
+    expect(container.querySelector('img')).toBeNull()
+    expect(getByText('JS')).toBeTruthy()
+  })
+
   it('renders the initials when there is no avatarPath', () => {
     const { container, getByText } = setup({
       public_name: 'Bob',

package/src/components/ContactSuggestion.jsx

@@ -1,47 +1,44 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { models } from 'cozy-client'
-import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import { getPrimaryCozy } from 'cozy-client/dist/models/contact'
 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 'twake-i18n'
 
-import { Contact, Group, getDisplayName, getInitials } from '../models'
+import { Contact, Group, getDisplayName } from '../models'
 import { GroupAvatar } from './Avatar/GroupAvatar'
-
-const ContactModel = models.contact
+import { MemberAvatar } from './Avatar/MemberAvatar'
 
 export const ContactSuggestion = ({ contactOrGroup }) => {
   const { t } = useI18n()
-  let avatarText, name, details
-  const isContactGroup = contactOrGroup._type === Group.doctype
-  if (isContactGroup) {
-    name = contactOrGroup.name
-    avatarText = 'G'
-    details = t('Share.members.count', {
-      smart_count: contactOrGroup.members.length.toString()
-    })
-  } else {
-    name = getDisplayName(contactOrGroup)
-    avatarText = getInitials(contactOrGroup)
-    details = ContactModel.getPrimaryCozy(contactOrGroup)
+
+  if (contactOrGroup._type === Group.doctype) {
+    return (
+      <ListItem button>
+        <ListItemIcon>
+          <GroupAvatar size="m" />
+        </ListItemIcon>
+        <ListItemText
+          primary={contactOrGroup.name}
+          secondary={t('Share.members.count', {
+            smart_count: contactOrGroup.members.length.toString()
+          })}
+        />
+      </ListItem>
+    )
   }
 
+  const name = getDisplayName(contactOrGroup)
+  const cozyUrl = getPrimaryCozy(contactOrGroup)
+
   return (
     <ListItem button>
       <ListItemIcon>
-        {isContactGroup ? (
-          <GroupAvatar size="m" />
-        ) : (
-          <Avatar size="m">{avatarText}</Avatar>
-        )}
+        <MemberAvatar recipient={contactOrGroup} size="m" />
       </ListItemIcon>
-      <ListItemText
-        primary={name}
-        secondary={details && details !== '' ? details : '-'}
-      />
+      <ListItemText primary={name} secondary={cozyUrl || '-'} />
     </ListItem>
   )
 }

package/src/index.jsx

@@ -9,6 +9,7 @@ export { SharingContext, withLocales }
 export { useSharingContext } from './hooks/useSharingContext'
 export { useFetchDocumentPath } from './hooks/useFetchDocumentPath'
 
+export { MemberAvatar } from './components/Avatar/MemberAvatar'
 export { SharedDocument } from './SharedDocument'
 export { SharedStatus } from './SharedStatus'
 export { SharedBadge } from './SharedBadge'