cozy-ui 146.0.0 → 146.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [146.1.0](https://github.com/cozy/cozy-ui/compare/v146.0.0...v146.1.0) (2026-10-29)
+
+
+### Features
+
+* **MemberList:** Add the members list, row, role menu and avatars ([f96cadf](https://github.com/cozy/cozy-ui/commit/f96cadf))
+
 # [146.0.0](https://github.com/cozy/cozy-ui/compare/v145.0.0...v146.0.0) (2026-10-26)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "146.0.0",
+  "version": "146.1.0",
   "description": "Cozy apps UI SDK",
   "engines": {
     "node": "24.x"

package/react/MemberList/EmptyMembers.jsx

@@ -0,0 +1,45 @@
+import { Icon, Team } from '@linagora/twake-icons'
+import cx from 'classnames'
+import React from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
+
+import { locales } from './locales'
+import Typography from '../Typography'
+import useBreakpoints from '../providers/Breakpoints'
+import { alpha, makeStyles } from '../styles'
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    backgroundColor: alpha(
+      theme.palette.secondary.main,
+      theme.palette.action.hoverOpacity
+    )
+  }
+}))
+
+const EmptyMembers = () => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
+  const classes = useStyles()
+
+  return (
+    <div
+      className={cx(
+        'u-flex u-flex-column u-flex-items-center u-pv-2 u-ph-1 u-bdrs-6',
+        isMobile ? 'u-mh-1' : 'u-mh-2',
+        classes.root
+      )}
+    >
+      <Icon icon={Team} size={48} color="var(--primaryColorLight)" />
+      <Typography variant="body2" className="u-mt-half">
+        {t('MemberList.empty.title')}
+      </Typography>
+      <Typography variant="caption" color="textSecondary">
+        {t('MemberList.empty.subtitle')}
+      </Typography>
+    </div>
+  )
+}
+
+export default EmptyMembers

package/react/MemberList/MemberList.spec.jsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+
+import MemberList from '.'
+import DemoProvider from '../providers/DemoProvider'
+
+const roles = [
+  { value: 'viewer', label: 'Viewer' },
+  { value: 'editor', label: 'Editor' }
+]
+
+const owner = { id: 'owner', name: 'Alice', isOwner: true }
+const bob = { id: 'bob', name: 'Bob', role: 'editor' }
+
+describe('MemberList', () => {
+  const setup = (members, props) =>
+    render(
+      <DemoProvider>
+        <MemberList
+          {...props}
+          members={members}
+          roles={roles}
+          onRoleChange={jest.fn()}
+          onRemove={jest.fn()}
+        />
+      </DemoProvider>
+    )
+
+  it('shows the owner first', () => {
+    setup([bob, owner])
+
+    const rows = screen.getAllByRole('listitem')
+    expect(rows[0]).toHaveTextContent('Alice')
+    expect(rows[1]).toHaveTextContent('Bob')
+  })
+
+  it('shows the empty state when there is no member but the owner', () => {
+    setup([owner])
+
+    expect(screen.queryByText('No one has been added yet')).toBeInTheDocument()
+  })
+
+  it('does not show the empty state when there are members', () => {
+    setup([owner, bob])
+
+    expect(screen.queryByText('No one has been added yet')).toBe(null)
+  })
+})

package/react/MemberList/Readme.md

@@ -0,0 +1,72 @@
+Lists the members of a sharing with `MemberRow`, the owner first.
+
+The list only gets display data: the app turns its own members (sharing recipients, address book users, space members…) into the shape described in `MemberRow` and handles `onRoleChange` and `onRemove`. New members fade in.
+
+### Demo
+
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import Buttons from 'cozy-ui/transpiled/react/Buttons'
+import MemberList from 'cozy-ui/transpiled/react/MemberList'
+
+const roles = [
+  { value: 'viewer', label: 'Viewer' },
+  { value: 'editor', label: 'Editor' }
+]
+
+initialState = {
+  members: [
+    { id: 'alice', name: 'Alice', subtitle: 'alice@cozy.cc', initials: 'A', isOwner: true, isCurrentUser: true },
+    { id: 'bob', name: 'Bob', subtitle: 'bob@cozy.cc', initials: 'B', role: 'editor', canChangeRole: true, canRemove: true },
+    { id: 'carol', name: 'Carol', subtitle: 'Invitation sent', initials: 'C', role: 'viewer', canChangeRole: true, canRemove: true }
+  ]
+}
+
+const changeRole = (member, role) =>
+  setState(({ members }) => ({
+    members: members.map(m => (m.id === member.id ? { ...m, role } : m))
+  }))
+
+const remove = member =>
+  setState(({ members }) => ({ members: members.filter(m => m.id !== member.id) }))
+
+const add = () =>
+  setState(({ members }) => ({
+    members: [
+      ...members,
+      { id: `dave-${members.length}`, name: 'Dave', subtitle: 'dave@cozy.cc', initials: 'D', role: 'viewer', canChangeRole: true, canRemove: true }
+    ]
+  }))
+
+;
+
+<DemoProvider>
+  <Buttons variant="secondary" label="Add a member" onClick={add} />
+  <MemberList
+    members={state.members}
+    roles={roles}
+    onRoleChange={changeRole}
+    onRemove={remove}
+  />
+</DemoProvider>
+```
+
+### Empty state
+
+A placeholder is shown when there is no member but the owner, unless `showEmptyState` is `false`. An app replaces its texts by defining the `MemberList.empty.title` and `MemberList.empty.subtitle` keys in its own locales.
+
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import MemberList from 'cozy-ui/transpiled/react/MemberList'
+
+;
+
+<DemoProvider>
+  <MemberList
+    members={[{ id: 'alice', name: 'Alice', subtitle: 'alice@cozy.cc', initials: 'A', isOwner: true, isCurrentUser: true }]}
+    roles={[]}
+    onRoleChange={() => {}}
+    onRemove={() => {}}
+  />
+</DemoProvider>
+```

package/react/MemberList/index.jsx

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useGetIsMounted } from 'rooks'
+
+import EmptyMembers from './EmptyMembers'
+import List from '../List'
+import MemberRow from '../MemberRow'
+import { memberPropType, rolesPropType } from '../MemberRow/propTypes'
+
+/**
+ * Lists the members of a sharing, the owner first
+ *
+ * @param {object} props
+ * @param {object[]} props.members - Members to display, see `MemberRow`
+ * @param {object[]} props.roles - Roles a member can get, as `{ value, label }`
+ * @param {Function} props.onRoleChange - Called with the member and its new role
+ * @param {Function} props.onRemove - Called with the member to remove
+ * @param {boolean} [props.showEmptyState] - Whether to show a placeholder
+ * when there is no member but the owner
+ * @param {string} [props.className] - Class name of the list
+ */
+const MemberList = ({
+  members,
+  roles,
+  onRoleChange,
+  onRemove,
+  showEmptyState = true,
+  className
+}) => {
+  const getIsMounted = useGetIsMounted()
+  const owner = members.find(member => member.isOwner)
+  const otherMembers = members.filter(member => !member.isOwner)
+
+  return (
+    <>
+      <List className={className}>
+        {owner && (
+          <MemberRow
+            member={owner}
+            roles={roles}
+            onRoleChange={onRoleChange}
+            onRemove={onRemove}
+          />
+        )}
+        {otherMembers.map(member => (
+          <MemberRow
+            key={member.id}
+            member={member}
+            roles={roles}
+            isNew={getIsMounted()}
+            onRoleChange={onRoleChange}
+            onRemove={onRemove}
+          />
+        ))}
+      </List>
+      {showEmptyState && otherMembers.length === 0 && <EmptyMembers />}
+    </>
+  )
+}
+
+MemberList.propTypes = {
+  members: PropTypes.arrayOf(memberPropType).isRequired,
+  roles: rolesPropType.isRequired,
+  onRoleChange: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  showEmptyState: PropTypes.bool,
+  className: PropTypes.string
+}
+
+export default MemberList

package/react/MemberList/locales/de.json

@@ -0,0 +1,8 @@
+{
+  "MemberList": {
+    "empty": {
+      "title": "Noch niemand hinzugefügt",
+      "subtitle": "Eingeladene Personen werden hier angezeigt."
+    }
+  }
+}

package/react/MemberList/locales/en.json

@@ -0,0 +1,8 @@
+{
+  "MemberList": {
+    "empty": {
+      "title": "No one has been added yet",
+      "subtitle": "People invited to join will be listed here."
+    }
+  }
+}

package/react/MemberList/locales/es.json

@@ -0,0 +1,8 @@
+{
+  "MemberList": {
+    "empty": {
+      "title": "Todavía no se ha añadido a nadie",
+      "subtitle": "Las personas invitadas aparecerán aquí."
+    }
+  }
+}

package/react/MemberList/locales/fr.json

@@ -0,0 +1,8 @@
+{
+  "MemberList": {
+    "empty": {
+      "title": "Personne n'a encore été ajouté",
+      "subtitle": "Les personnes invitées apparaîtront ici."
+    }
+  }
+}

package/react/MemberList/locales/index.js

@@ -0,0 +1,17 @@
+import de from './de.json'
+import en from './en.json'
+import es from './es.json'
+import fr from './fr.json'
+import it from './it.json'
+import ru from './ru.json'
+import vi from './vi.json'
+
+export const locales = {
+  de,
+  en,
+  es,
+  fr,
+  it,
+  ru,
+  vi
+}

package/react/MemberList/locales/it.json

@@ -0,0 +1,8 @@
+{
+  "MemberList": {
+    "empty": {
+      "title": "Nessuno è stato ancora aggiunto",
+      "subtitle": "Le persone invitate verranno elencate qui."
+    }
+  }
+}

package/react/MemberList/locales/ru.json

@@ -0,0 +1,8 @@
+{
+  "MemberList": {
+    "empty": {
+      "title": "Пока никто не добавлен",
+      "subtitle": "Здесь появятся приглашённые пользователи."
+    }
+  }
+}

package/react/MemberList/locales/vi.json

@@ -0,0 +1,8 @@
+{
+  "MemberList": {
+    "empty": {
+      "title": "Chưa có ai được thêm",
+      "subtitle": "Những người được mời sẽ hiển thị tại đây."
+    }
+  }
+}

package/react/MemberRow/MemberAvatar.jsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react'
+
+import Avatar from '../Avatar'
+
+const MemberAvatar = ({ initials, avatarUrl, ...rest }) => {
+  // 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.
+  const [erroredSrc, setErroredSrc] = useState(null)
+
+  // 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 (
+    <Avatar {...rest}>
+      {avatarUrl && erroredSrc !== avatarUrl ? (
+        <img
+          width="100%"
+          height="100%"
+          src={avatarUrl}
+          onError={() => setErroredSrc(avatarUrl)}
+        />
+      ) : (
+        initials
+      )}
+    </Avatar>
+  )
+}
+
+export default MemberAvatar

package/react/MemberRow/MemberAvatar.spec.jsx

@@ -0,0 +1,26 @@
+import { render, fireEvent } from '@testing-library/react'
+import React from 'react'
+
+import MemberAvatar from './MemberAvatar'
+import DemoProvider from '../providers/DemoProvider'
+
+describe('MemberAvatar', () => {
+  const setup = (initials, avatarUrl) =>
+    render(
+      <DemoProvider>
+        <MemberAvatar initials={initials} avatarUrl={avatarUrl} />
+      </DemoProvider>
+    )
+
+  it('falls back to the initials when the avatar image fails to load', () => {
+    const { container, getByText } = setup(
+      'B',
+      'http://cozy.example.com/sharings/123/recipients/0/avatar?v=owner'
+    )
+
+    fireEvent.error(container.querySelector('img'))
+
+    expect(container.querySelector('img')).toBeNull()
+    expect(getByText('B')).toBeTruthy()
+  })
+})

package/react/MemberRow/MemberGroupAvatar.jsx

@@ -0,0 +1,17 @@
+import { Icon, Peoples } from '@linagora/twake-icons'
+import React from 'react'
+
+import Avatar, { colorToGradient } from '../Avatar'
+import { COLORS } from '../ColorList/helpers'
+
+const DEFAULT_COLOR = COLORS[4]
+
+const MemberGroupAvatar = ({ size, color = DEFAULT_COLOR, className }) => {
+  return (
+    <Avatar size={size} color={colorToGradient(color)} className={className}>
+      <Icon icon={Peoples} />
+    </Avatar>
+  )
+}
+
+export default MemberGroupAvatar

package/react/MemberRow/MemberRoleMenu.jsx

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+
+import MemberRoleMenuHeader from './MemberRoleMenuHeader'
+import { memberPropType, rolesPropType } from './propTypes'
+import ActionsMenuItem from '../ActionsMenu/ActionsMenuItem'
+import ActionsMenuWrapper from '../ActionsMenu/ActionsMenuWrapper'
+import DropdownButton from '../DropdownButton'
+import ListItemIcon from '../ListItemIcon'
+import ListItemText from '../ListItemText'
+import Radios from '../Radios'
+import useBreakpoints from '../providers/Breakpoints'
+
+const MemberRoleMenu = ({ member, value, roles, onChange }) => {
+  const { isMobile } = useBreakpoints()
+  const buttonRef = useRef()
+  const [isMenuDisplayed, setMenuDisplayed] = useState(false)
+
+  const label = roles.find(role => role.value === value)?.label
+
+  const handleRoleClick = role => {
+    if (role.value !== value) onChange(role.value)
+  }
+
+  return (
+    <>
+      <DropdownButton
+        ref={buttonRef}
+        aria-controls="simple-menu"
+        aria-haspopup="true"
+        onClick={() => setMenuDisplayed(true)}
+        textVariant="body2"
+      >
+        {label}
+      </DropdownButton>
+      <ActionsMenuWrapper
+        open={isMenuDisplayed}
+        anchorEl={buttonRef.current}
+        getContentAnchorEl={null}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+        keepMounted
+        autoClose
+        onClose={() => setMenuDisplayed(false)}
+      >
+        {/* The header renders nothing on desktop but would still take the initial focus of the menu */}
+        {isMobile && <MemberRoleMenuHeader member={member} />}
+        {roles.map(role => (
+          <ActionsMenuItem
+            key={role.value}
+            onClick={() => handleRoleClick(role)}
+          >
+            <ListItemIcon>
+              <Radios checked={role.value === value} />
+            </ListItemIcon>
+            <ListItemText primary={role.label} />
+          </ActionsMenuItem>
+        ))}
+      </ActionsMenuWrapper>
+    </>
+  )
+}
+
+MemberRoleMenu.propTypes = {
+  member: memberPropType.isRequired,
+  value: PropTypes.string.isRequired,
+  roles: rolesPropType.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
+export default MemberRoleMenu

package/react/MemberRow/MemberRoleMenu.spec.jsx

@@ -0,0 +1,49 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import React from 'react'
+
+import MemberRoleMenu from './MemberRoleMenu'
+import DemoProvider from '../providers/DemoProvider'
+
+const viewer = { value: 'viewer', label: 'Viewer' }
+const editor = { value: 'editor', label: 'Editor' }
+
+describe('MemberRoleMenu', () => {
+  let createRangeBackup
+
+  beforeAll(() => {
+    createRangeBackup = global.document.createRange
+    global.document.createRange = jest.fn(() => ({
+      setStart: () => {},
+      setEnd: () => {},
+      commonAncestorContainer: { nodeName: 'BODY', ownerDocument: document }
+    }))
+  })
+
+  afterAll(() => {
+    global.document.createRange = createRangeBackup
+  })
+
+  const setup = roles => {
+    const onChange = jest.fn()
+    render(
+      <DemoProvider>
+        <MemberRoleMenu
+          member={{ id: 'bob', name: 'Bob' }}
+          value="editor"
+          roles={roles}
+          onChange={onChange}
+        />
+      </DemoProvider>
+    )
+    return { onChange }
+  }
+
+  it('does not change the role when the current one is picked', () => {
+    const { onChange } = setup([viewer, editor])
+
+    fireEvent.click(screen.getByRole('button', { name: 'Editor' }))
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Editor' }))
+
+    expect(onChange).not.toHaveBeenCalled()
+  })
+})

package/react/MemberRow/MemberRoleMenuHeader.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { useI18n } from 'twake-i18n'
+
+import MemberAvatar from './MemberAvatar'
+import MemberGroupAvatar from './MemberGroupAvatar'
+import { memberPropType } from './propTypes'
+import ActionsMenuMobileHeader from '../ActionsMenu/ActionsMenuMobileHeader'
+import ListItemIcon from '../ListItemIcon'
+import ListItemText from '../ListItemText'
+
+const MemberRoleMenuHeader = ({ member }) => {
+  const { t } = useI18n()
+  const { name, avatarUrl, initials, color, isGroup, isCurrentUser } = member
+
+  return (
+    <ActionsMenuMobileHeader>
+      <ListItemIcon>
+        {isGroup ? (
+          <MemberGroupAvatar size="m" color={color} />
+        ) : (
+          <MemberAvatar size="m" initials={initials} avatarUrl={avatarUrl} />
+        )}
+      </ListItemIcon>
+      <ListItemText
+        primary={
+          isCurrentUser
+            ? t('MemberRow.you')
+            : name || t('MemberRow.defaultName')
+        }
+        primaryTypographyProps={{ variant: 'h6' }}
+      />
+    </ActionsMenuMobileHeader>
+  )
+}
+
+MemberRoleMenuHeader.propTypes = {
+  member: memberPropType.isRequired
+}
+
+export default MemberRoleMenuHeader

package/react/MemberRow/MemberRow.spec.jsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import { I18n, useI18n } from 'twake-i18n'
+
+import MemberRow from '.'
+import List from '../List'
+import DemoProvider from '../providers/DemoProvider'
+
+describe('MemberRow', () => {
+  it('keeps the translations of the app in the subtitle, and its own', () => {
+    const AppSubtitle = () => {
+      const { t } = useI18n()
+      return t('status')
+    }
+    render(
+      <DemoProvider>
+        <I18n lang="en" dictRequire={() => ({ status: 'Invitation sent' })}>
+          <List>
+            <MemberRow
+              member={{
+                id: 'bob',
+                name: 'Bob',
+                subtitle: <AppSubtitle />,
+                role: 'editor',
+                canRemove: true
+              }}
+              roles={[{ value: 'editor', label: 'Editor' }]}
+              onRoleChange={jest.fn()}
+              onRemove={jest.fn()}
+            />
+          </List>
+        </I18n>
+      </DemoProvider>
+    )
+
+    expect(screen.queryByText('Invitation sent')).toBeInTheDocument()
+    expect(screen.queryByLabelText('Remove from sharing')).toBeInTheDocument()
+  })
+})

package/react/MemberRow/MemberRowActions.jsx

@@ -0,0 +1,56 @@
+import { Icon, CrossCircleOutline } from '@linagora/twake-icons'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useI18n } from 'twake-i18n'
+
+import MemberRoleMenu from './MemberRoleMenu'
+import { memberPropType, rolesPropType } from './propTypes'
+import IconButton from '../IconButton'
+import Spinner from '../Spinner'
+import Typography from '../Typography'
+
+const MemberRowActions = ({ member, roles, onRoleChange, onRemove }) => {
+  const { t } = useI18n()
+  const { role, canChangeRole, canRemove, removeIcon, removeLabel, isPending } =
+    member
+  const memberRoles = member.roles ?? roles
+
+  const isRoleMenuShown = canChangeRole && !isPending
+
+  return (
+    <div className="u-flex u-flex-items-center u-g-1">
+      {isPending && <Spinner />}
+      {isRoleMenuShown ? (
+        <MemberRoleMenu
+          member={member}
+          value={role}
+          roles={memberRoles}
+          onChange={newRole => onRoleChange(member, newRole)}
+        />
+      ) : (
+        <Typography variant="body2">
+          {memberRoles.find(memberRole => memberRole.value === role)?.label}
+        </Typography>
+      )}
+      {canRemove && !isPending && (
+        <IconButton
+          onClick={() => onRemove(member)}
+          size="small"
+          className="u-ml-half"
+          aria-label={removeLabel ?? t('MemberRow.remove')}
+        >
+          <Icon icon={removeIcon ?? CrossCircleOutline} />
+        </IconButton>
+      )}
+    </div>
+  )
+}
+
+MemberRowActions.propTypes = {
+  member: memberPropType.isRequired,
+  roles: rolesPropType.isRequired,
+  onRoleChange: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired
+}
+
+export default MemberRowActions