cozy-ui 146.2.2 → 146.3.1

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [146.3.1](https://github.com/cozy/cozy-ui/compare/v146.3.0...v146.3.1) (2026-11-03)
+
+
+### Bug Fixes
+
+* **MemberAutocomplete:** Enable Send only for a text giving members ([6ffaeb0](https://github.com/cozy/cozy-ui/commit/6ffaeb0))
+* **MuiCozyTheme:** Stop the CircularProgress animation in screenshots ([d5025ad](https://github.com/cozy/cozy-ui/commit/d5025ad))
+
+# [146.3.0](https://github.com/cozy/cozy-ui/compare/v146.2.2...v146.3.0) (2026-11-03)
+
+
+### Bug Fixes
+
+* **DropdownText:** Restore the colors once enabled again ([8d28332](https://github.com/cozy/cozy-ui/commit/8d28332))
+
+
+### Features
+
+* **MemberAutocomplete:** Add the field to pick the members to invite ([ee0250b](https://github.com/cozy/cozy-ui/commit/ee0250b))
+* **MemberRoleMenu:** Add the size, disabled, onOpen and onClose props ([5306f72](https://github.com/cozy/cozy-ui/commit/5306f72))
+
 ## [146.2.2](https://github.com/cozy/cozy-ui/compare/v146.2.1...v146.2.2) (2026-11-02)
 
 

package/package.json

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

package/react/DropdownText/index.jsx

@@ -14,15 +14,13 @@ const useStyles = makeStyles(theme => ({
       spaceBetween ? 'space-between' : 'left'
   },
   typography: {
-    color: ({ disabled }) =>
-      disabled ? theme.palette.text.disabled : undefined
+    color: ({ disabled }) => (disabled ? theme.palette.text.disabled : null)
   },
   endIcon: {
     display: 'flex',
     marginLeft: '5px',
-    marginTop: ({ variant }) => (variant === 'body1' ? '3px' : undefined),
-    color: ({ disabled }) =>
-      disabled ? theme.palette.text.disabled : undefined
+    marginTop: ({ variant }) => (variant === 'body1' ? '3px' : null),
+    color: ({ disabled }) => (disabled ? theme.palette.text.disabled : null)
   }
 }))
 

package/react/MemberAutocomplete/MemberAutocomplete.spec.jsx

@@ -0,0 +1,107 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+
+import MemberAutocomplete from '.'
+import DemoProvider from '../providers/DemoProvider'
+
+const getMembersFromText = text =>
+  (text.match(/[^\s,;]+@[^\s,;]+/g) || []).map(email => ({
+    id: email,
+    name: email
+  }))
+
+describe('MemberAutocomplete', () => {
+  const setup = () => {
+    const onChange = jest.fn()
+    render(
+      <DemoProvider>
+        <MemberAutocomplete
+          value={[]}
+          getMembersFromText={getMembersFromText}
+          placeholder="Add people"
+          onChange={onChange}
+        />
+      </DemoProvider>
+    )
+    return { onChange, input: screen.getByPlaceholderText('Add people') }
+  }
+
+  it('adds a member per pasted email', () => {
+    const { onChange, input } = setup()
+
+    fireEvent.paste(input, {
+      clipboardData: { getData: () => 'alice@cozy.cc, bob@cozy.cc' }
+    })
+
+    expect(onChange).toHaveBeenCalledWith([
+      { id: 'alice@cozy.cc', name: 'alice@cozy.cc' },
+      { id: 'bob@cozy.cc', name: 'bob@cozy.cc' }
+    ])
+  })
+
+  it('adds the typed email on Space', () => {
+    const { onChange, input } = setup()
+
+    fireEvent.change(input, { target: { value: 'alice@cozy.cc' } })
+    fireEvent.keyDown(input, { key: ' ' })
+
+    expect(onChange).toHaveBeenCalledWith([
+      { id: 'alice@cozy.cc', name: 'alice@cozy.cc' }
+    ])
+  })
+
+  it('adds the typed email when leaving the field', () => {
+    const { onChange, input } = setup()
+
+    fireEvent.change(input, { target: { value: 'alice@cozy.cc' } })
+    fireEvent.blur(input)
+
+    expect(onChange).toHaveBeenCalledWith([
+      { id: 'alice@cozy.cc', name: 'alice@cozy.cc' }
+    ])
+  })
+
+  it('keeps the typed text when the picked members come in a new array', () => {
+    const alice = { id: 'alice', name: 'Alice' }
+    const renderField = value => (
+      <DemoProvider>
+        <MemberAutocomplete
+          value={value}
+          placeholder="Add people"
+          onChange={() => {}}
+        />
+      </DemoProvider>
+    )
+    const { rerender } = render(renderField([alice]))
+    const input = screen.getByRole('textbox')
+
+    fireEvent.change(input, { target: { value: 'bo' } })
+    rerender(renderField([alice]))
+
+    expect(input.value).toBe('bo')
+  })
+
+  it('enables Send only for a typed text that gives members', () => {
+    const getMembersWithDomain = text =>
+      (text.match(/\S+@\S+\.\S+/g) || []).map(email => ({ id: email }))
+    render(
+      <DemoProvider>
+        <MemberAutocomplete
+          value={[]}
+          getMembersFromText={getMembersWithDomain}
+          placeholder="Add people"
+          onChange={() => {}}
+          onSubmit={() => {}}
+        />
+      </DemoProvider>
+    )
+    const input = screen.getByPlaceholderText('Add people')
+    const send = screen.getByRole('button', { name: 'Send' })
+
+    fireEvent.change(input, { target: { value: 'bob@example' } })
+    expect(send).toBeDisabled()
+
+    fireEvent.change(input, { target: { value: 'bob@example.com' } })
+    expect(send).toBeEnabled()
+  })
+})

package/react/MemberAutocomplete/MemberAutocompleteActions.jsx

@@ -0,0 +1,77 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { useLayoutEffect, useRef } from 'react'
+
+import CircularProgress from '../CircularProgress'
+import MemberRoleMenu from '../MemberRow/MemberRoleMenu'
+import { rolesPropType } from '../MemberRow/propTypes'
+import { makeStyles } from '../styles'
+
+const useStyles = makeStyles({
+  root: {
+    top: '.375rem',
+    height: '2.375rem'
+  }
+})
+
+const MemberAutocompleteActions = ({
+  roles,
+  role,
+  isLoading,
+  disabled,
+  onRoleChange,
+  onRoleMenuOpen,
+  onRoleMenuClose,
+  onWidthChange
+}) => {
+  const classes = useStyles()
+  const rootRef = useRef()
+  const isRoleMenuShown = roles !== undefined && role !== undefined
+  const hasActions = isLoading || isRoleMenuShown
+
+  useLayoutEffect(() => {
+    onWidthChange(rootRef.current ? rootRef.current.offsetWidth : 0)
+  }, [roles, role, isLoading, onWidthChange])
+
+  if (!hasActions) return null
+
+  return (
+    // Clicks and keys in the role menu, portaled or not, bubble to the Autocomplete root,
+    // which would focus the input, remove the last member or pick a suggestion
+    <div
+      ref={rootRef}
+      className={cx(
+        'u-pos-absolute u-right-m u-flex u-flex-items-center u-g-half',
+        classes.root
+      )}
+      onClick={event => event.stopPropagation()}
+      onKeyDown={event => event.stopPropagation()}
+    >
+      {isLoading && <CircularProgress size={16} />}
+      {isRoleMenuShown && (
+        <MemberRoleMenu
+          value={role}
+          roles={roles}
+          size="small"
+          disabled={disabled}
+          onChange={onRoleChange}
+          onOpen={onRoleMenuOpen}
+          onClose={onRoleMenuClose}
+        />
+      )}
+    </div>
+  )
+}
+
+MemberAutocompleteActions.propTypes = {
+  roles: rolesPropType,
+  role: PropTypes.string,
+  isLoading: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  onRoleChange: PropTypes.func,
+  onRoleMenuOpen: PropTypes.func.isRequired,
+  onRoleMenuClose: PropTypes.func.isRequired,
+  onWidthChange: PropTypes.func.isRequired
+}
+
+export default MemberAutocompleteActions

package/react/MemberAutocomplete/MemberChip.jsx

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
+
+import Chip from '../Chips'
+import MemberOrGroupAvatar from '../MemberRow/MemberOrGroupAvatar'
+import { locales } from '../MemberRow/locales'
+import { memberPropType } from '../MemberRow/propTypes'
+
+const MemberChip = ({ member, tagProps }) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+
+  return (
+    <Chip
+      {...tagProps}
+      label={member.name || t('MemberRow.defaultName')}
+      avatar={<MemberOrGroupAvatar member={member} size="xs" />}
+    />
+  )
+}
+
+MemberChip.propTypes = {
+  member: memberPropType.isRequired,
+  /** Props given by the Autocomplete for each tag */
+  tagProps: PropTypes.object.isRequired
+}
+
+export default MemberChip

package/react/MemberAutocomplete/MemberSuggestion.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
+
+import ListItem from '../ListItem'
+import ListItemIcon from '../ListItemIcon'
+import ListItemText from '../ListItemText'
+import MemberOrGroupAvatar from '../MemberRow/MemberOrGroupAvatar'
+import { locales } from '../MemberRow/locales'
+import { memberPropType } from '../MemberRow/propTypes'
+
+const MemberSuggestion = ({ suggestion }) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+
+  return (
+    <ListItem component="div">
+      <ListItemIcon>
+        <MemberOrGroupAvatar member={suggestion} size="m" />
+      </ListItemIcon>
+      <ListItemText
+        primary={suggestion.name || t('MemberRow.defaultName')}
+        secondary={suggestion.subtitle}
+      />
+    </ListItem>
+  )
+}
+
+MemberSuggestion.propTypes = {
+  suggestion: memberPropType.isRequired
+}
+
+export default MemberSuggestion

package/react/MemberAutocomplete/Readme.md

@@ -0,0 +1,65 @@
+Field to pick the members to invite: suggestions while typing, picked members shown as chips, and optionally the role to give them and a send button.
+
+The field only gets display data, as `MemberRow`: the app turns its own contacts, groups or users into members (`id`, `name`, `subtitle`, `email`, `avatarUrl`, `initials`, `color`, `isGroup`, `data`).
+
+* Local suggestions from `getSuggestions` show at once. Remote ones from `fetchSuggestions` come first, once `minQueryLength` characters are typed and `debounceMs` has passed.
+* `getMembersFromText` turns the text into members on Enter, Space, paste, and on blur for an email-like text. Its members are also suggested when nothing else matches. A text giving no member stays typed.
+* Two members with the same `id` or the same `email`, whatever its case, are the same person: a typed email gives the suggested or picked contact with this email, and is never added twice.
+* The role menu shows in the field when both `roles` and `role` are given.
+* Out of focus, the field collapses to its first three members and a `+N` counter.
+* The label of the send button can be replaced in the app's locales with the `MemberAutocomplete.send` key.
+
+### Demo
+
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import Variants from 'cozy-ui/docs/components/Variants'
+import MemberAutocomplete from 'cozy-ui/transpiled/react/MemberAutocomplete'
+
+const contacts = [
+  { id: 'alice', name: 'Alice Wonderland', subtitle: 'alice@cozy.cc', email: 'alice@cozy.cc', initials: 'AW' },
+  { id: 'bob', name: 'Bob Sponge', subtitle: 'bob@cozy.cc', email: 'bob@cozy.cc', initials: 'BS' },
+  { id: 'carol', name: 'Carol Singer', subtitle: 'carol@cozy.cc', email: 'carol@cozy.cc', initials: 'CS' },
+  { id: 'family', name: 'Family', subtitle: '3 members', isGroup: true, color: '#FF7F1B' }
+]
+
+const roles = [
+  { value: 'readWrite', label: 'Can edit' },
+  { value: 'readOnly', label: 'Can view' }
+]
+
+const getSuggestions = text =>
+  contacts.filter(contact =>
+    [contact.name, contact.email || ""].some(field => field.toLowerCase().includes(text.toLowerCase()))
+  )
+
+const getMembersFromText = text =>
+  (text.match(/[^\s,;]+@[^\s,;]+\.[^\s,;]+/g) || []).map(email => ({ id: email, name: email, subtitle: '-', email, initials: email[0].toUpperCase() }))
+
+const initialVariants = [{ title: true, roles: true, submit: true, loading: false, disabled: false }]
+
+initialState = { members: [], role: 'readWrite' }
+
+;
+
+<DemoProvider>
+  <Variants initialVariants={initialVariants} screenshotAllVariants>
+    {variant => (
+      <MemberAutocomplete
+        value={state.members}
+        getSuggestions={getSuggestions}
+        getMembersFromText={getMembersFromText}
+        roles={variant.roles ? roles : undefined}
+        role={state.role}
+        title={variant.title ? 'Add people' : undefined}
+        placeholder="Type a name or email address"
+        loading={variant.loading}
+        disabled={variant.disabled}
+        onChange={members => setState({ members })}
+        onRoleChange={role => setState({ role })}
+        onSubmit={variant.submit ? () => setState({ members: [] }) : undefined}
+      />
+    )}
+  </Variants>
+</DemoProvider>
+```

package/react/MemberAutocomplete/helpers.js

@@ -0,0 +1,70 @@
+const EMAIL_LIKE = /\S+@\S+/
+
+const MAX_SUGGESTIONS = 20
+
+export const isEmailLike = text => EMAIL_LIKE.test(text)
+
+const normalizeEmail = email => email.trim().toLowerCase()
+
+/**
+ * Whether two members are the same person: same id, or same email whatever its case
+ */
+export const isSameMember = (member, other) =>
+  member.id === other.id ||
+  (Boolean(member.email) &&
+    Boolean(other.email) &&
+    normalizeEmail(member.email) === normalizeEmail(other.email))
+
+export const removeDuplicateMembers = members =>
+  members.filter(
+    (member, index) =>
+      members.findIndex(other => isSameMember(member, other)) === index
+  )
+
+export const getUnpickedMembers = (members, pickedMembers) =>
+  members.filter(
+    member => !pickedMembers.some(picked => isSameMember(member, picked))
+  )
+
+/**
+ * Replaces each member by the known one for the same person, so that a typed email
+ * gives the suggested contact rather than a second member
+ *
+ * @param {object[]} members - Members made from a text
+ * @param {object[]} knownMembers - Picked and suggested members
+ * @returns {object[]}
+ */
+export const resolveKnownMembers = (members, knownMembers) =>
+  removeDuplicateMembers(
+    members.map(
+      member =>
+        knownMembers.find(known => isSameMember(member, known)) ?? member
+    )
+  )
+
+/**
+ * Turns the value of the Autocomplete, where typed texts stay strings, into members without duplicates
+ *
+ * @param {Array<object|string>} value - Picked members and typed texts
+ * @param {Function} getMembersFromText - Turns a text into members
+ * @returns {object[]}
+ */
+export const makeMembersFromValue = (value, getMembersFromText) =>
+  removeDuplicateMembers(
+    value.flatMap(item =>
+      typeof item === 'string' ? getMembersFromText(item) : [item]
+    )
+  )
+
+/**
+ * Members to suggest: the matching ones without duplicates, else the ones made from the text
+ *
+ * @param {object[]} matchingSuggestions - Fetched then local members matching the text
+ * @param {object[]} textSuggestions - Members made from the text
+ * @returns {object[]}
+ */
+export const makeSuggestions = (matchingSuggestions, textSuggestions) =>
+  (matchingSuggestions.length > 0
+    ? removeDuplicateMembers(matchingSuggestions)
+    : textSuggestions
+  ).slice(0, MAX_SUGGESTIONS)

package/react/MemberAutocomplete/helpers.spec.js

@@ -0,0 +1,51 @@
+import {
+  isSameMember,
+  makeMembersFromValue,
+  resolveKnownMembers
+} from './helpers'
+
+describe('isSameMember', () => {
+  it('matches the same id or the same email whatever its case', () => {
+    const alice = { id: 'alice', email: 'Alice@cozy.cc' }
+
+    expect(isSameMember(alice, { id: 'alice' })).toBe(true)
+    expect(isSameMember(alice, { id: 'other', email: 'alice@cozy.cc ' })).toBe(
+      true
+    )
+    expect(isSameMember(alice, { id: 'bob', email: 'bob@cozy.cc' })).toBe(false)
+    expect(isSameMember({ id: 'alice' }, { id: 'bob' })).toBe(false)
+    expect(
+      isSameMember({ id: 'alice', email: '' }, { id: 'bob', email: '' })
+    ).toBe(false)
+  })
+})
+
+describe('resolveKnownMembers', () => {
+  it('replaces the members of known people and removes the duplicates', () => {
+    const alice = { id: 'alice', email: 'alice@cozy.cc' }
+    const typed = [
+      { id: 'alice@cozy.cc', email: 'alice@cozy.cc' },
+      { id: 'bob@cozy.cc', email: 'bob@cozy.cc' },
+      { id: 'ALICE@cozy.cc', email: 'ALICE@cozy.cc' }
+    ]
+
+    expect(resolveKnownMembers(typed, [alice])).toEqual([
+      alice,
+      { id: 'bob@cozy.cc', email: 'bob@cozy.cc' }
+    ])
+  })
+})
+
+describe('makeMembersFromValue', () => {
+  const getMembersFromText = text =>
+    text.split(',').map(email => ({ id: email.trim() }))
+
+  it('turns the typed texts into members and removes the duplicates', () => {
+    const value = [{ id: 'alice@cozy.cc' }, 'bob@cozy.cc, alice@cozy.cc']
+
+    expect(makeMembersFromValue(value, getMembersFromText)).toEqual([
+      { id: 'alice@cozy.cc' },
+      { id: 'bob@cozy.cc' }
+    ])
+  })
+})