cozy-ui 145.0.0 → 146.1.0

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+# [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)
+
+
+### Features
+
+* **Markdown:** Add getPlainTextFromMarkdown helper ([012ddff](https://github.com/cozy/cozy-ui/commit/012ddff))
+* **MuiCozyTheme:** Lighten the Backdrop to 12% black in light theme ([f5945a5](https://github.com/cozy/cozy-ui/commit/f5945a5))
+* Remove Tile component ([4641542](https://github.com/cozy/cozy-ui/commit/4641542))
+
+
+### BREAKING CHANGES
+
+* Tile has been moved to cozy-ui-plus. Replace
+`import Tile from 'cozy-ui/transpiled/react/Tile'` with
+`import Tile from 'cozy-ui-plus/dist/Tile'`.
+
 # [145.0.0](https://github.com/cozy/cozy-ui/compare/v144.0.0...v145.0.0) (2026-10-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "145.0.0",
+  "version": "146.1.0",
   "description": "Cozy apps UI SDK",
   "engines": {
     "node": "24.x"
@@ -181,7 +181,9 @@
     "react-select": "^4.3.0",
     "react-virtuoso": "^4.13.0",
     "remark-gfm": "^1.0.0",
-    "rooks": "8.4.0"
+    "remark-parse": "^9.0.0",
+    "rooks": "8.4.0",
+    "unified": "^9.0.0"
   },
   "peerDependencies": {
     "@linagora/twake-icons": ">=2.6.2",

package/react/Markdown/Readme.md

@@ -69,3 +69,18 @@ Block code:
 <Markdown content={textInMarkdown} />
 
 ```
+
+### Plain text
+
+`getPlainTextFromMarkdown` gives the words of a Markdown content on one line, without its syntax, as `Markdown` shows them: for a preview, in a list for example.
+
+```jsx
+import { getPlainTextFromMarkdown } from 'cozy-ui/transpiled/react/Markdown/helpers'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+
+const answer = '# Demo\n\nSome **bold** text, a [link](https://cozy.io) and a list:\n\n- first\n- second'
+
+;
+
+<Typography noWrap>{getPlainTextFromMarkdown(answer)}</Typography>
+```

package/react/Markdown/helpers.js

@@ -0,0 +1,31 @@
+import remarkGfm from 'remark-gfm'
+import remarkParse from 'remark-parse'
+import unified from 'unified'
+
+export const remarkPlugins = [remarkGfm]
+
+const markdown = unified().use(remarkParse).use(remarkPlugins)
+
+// Nodes whose children are blocks or cells: a space keeps their words apart
+const BLOCKS = ['root', 'blockquote', 'list', 'listItem', 'table', 'tableRow']
+
+const getWords = node => {
+  if (node.type === 'image' || node.type === 'imageReference')
+    return node.alt ?? ''
+  if (node.type === 'break') return ' '
+  if (typeof node.value === 'string') return node.value
+
+  return (node.children ?? [])
+    .map(getWords)
+    .join(BLOCKS.includes(node.type) ? ' ' : '')
+}
+
+/**
+ * Gives the words of a Markdown content on one line, without its syntax,
+ * as the Markdown component shows them: for a preview
+ *
+ * @param {string} content - Markdown content
+ * @returns {string}
+ */
+export const getPlainTextFromMarkdown = content =>
+  getWords(markdown.parse(content)).replace(/\s+/g, ' ').trim()

package/react/Markdown/helpers.spec.js

@@ -0,0 +1,68 @@
+import { getPlainTextFromMarkdown } from './helpers'
+
+describe('getPlainTextFromMarkdown', () => {
+  it('gives the words of a Markdown content on one line', () => {
+    const content = [
+      '# Title',
+      '',
+      'Some **bold** text, with _italic_',
+      '',
+      '- a first item',
+      '1. a second item, with `inline code`',
+      '',
+      '| Name  | Role      |',
+      '|-------|:---------:|',
+      '| Alice | Developer |',
+      '',
+      '> A quote, a link: [cozy](https://cozy.io) and ![a logo](logo.png).',
+      '',
+      '```js',
+      "console.log('hello')",
+      '```'
+    ].join('\n')
+
+    expect(getPlainTextFromMarkdown(content)).toBe(
+      "Title Some bold text, with italic a first item a second item, with inline code Name Role Alice Developer A quote, a link: cozy and a logo. console.log('hello')"
+    )
+  })
+
+  it('keeps the characters that are no Markdown', () => {
+    expect(getPlainTextFromMarkdown('my_file_name is 2 * 3 = 6')).toBe(
+      'my_file_name is 2 * 3 = 6'
+    )
+    expect(getPlainTextFromMarkdown('2 ** 10 bytes in my__file')).toBe(
+      '2 ** 10 bytes in my__file'
+    )
+  })
+
+  it('removes bold, struck and italic by pairs', () => {
+    expect(
+      getPlainTextFromMarkdown('**a** and **b**, ~~c~~, *d* and _e_')
+    ).toBe('a and b, c, d and e')
+  })
+
+  it('gives the text of a link with parentheses in its URL', () => {
+    expect(
+      getPlainTextFromMarkdown(
+        '[Foo](https://en.wikipedia.org/wiki/Foo_(bar)) and ![a chart](chart_(1).png)'
+      )
+    ).toBe('Foo and a chart')
+  })
+
+  it('gives the alt of an image by reference', () => {
+    expect(
+      getPlainTextFromMarkdown('![a logo][logo]\n\n[logo]: logo.png')
+    ).toBe('a logo')
+  })
+
+  it('puts the lines of a hard break apart', () => {
+    expect(getPlainTextFromMarkdown('first line  \nsecond line')).toBe(
+      'first line second line'
+    )
+  })
+
+  it('gives nothing for a content of Markdown only', () => {
+    expect(getPlainTextFromMarkdown('![](chart.png)')).toBe('')
+    expect(getPlainTextFromMarkdown('---')).toBe('')
+  })
+})

package/react/Markdown/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
 
+import { remarkPlugins } from './helpers'
 import Link from '../Link'
 import Typography from '../Typography'
 
@@ -32,7 +32,7 @@ const components = {
 
 const Markdown = ({ content }) => {
   return (
-    <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+    <ReactMarkdown remarkPlugins={remarkPlugins} components={components}>
       {content}
     </ReactMarkdown>
   )

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