cozy-ui 128.9.0 → 128.10.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [128.10.1](https://github.com/cozy/cozy-ui/compare/v128.10.0...v128.10.1) (2025-09-16)
+
+
+### Bug Fixes
+
+* **AddModal/ContactForm:** Secondary input wasn't hide correctly ([b1fd6b0](https://github.com/cozy/cozy-ui/commit/b1fd6b0))
+
+# [128.10.0](https://github.com/cozy/cozy-ui/compare/v128.9.0...v128.10.0) (2025-09-16)
+
+
+### Features
+
+* **Contacts/AddModal:** Add matrix ID input ([db8f522](https://github.com/cozy/cozy-ui/commit/db8f522))
+* **Icons:** Add matrix ([4838a1f](https://github.com/cozy/cozy-ui/commit/4838a1f))
+
 # [128.9.0](https://github.com/cozy/cozy-ui/compare/v128.8.0...v128.9.0) (2025-09-16)
 
 

package/assets/icons/ui/matrix.svg

@@ -0,0 +1 @@
+<svg width="16" height="10" viewBox="0 0 16 10" xmlns="http://www.w3.org/2000/svg"><path d="M3 1.111H1.333V8.89H3V10H0V0h3v1.111ZM16 10h-3V8.889h1.667V1.11H13V0h3v10ZM9.807 3.667c.587 0 1.043.167 1.368.503.328.332.492.79.492 1.374V9h-1.23V5.72c0-.688-.311-1.032-.931-1.032a.983.983 0 0 0-.531.162.945.945 0 0 0-.36.372V9h-1.23V5.53c0-.258-.08-.462-.241-.612-.161-.153-.387-.23-.68-.23-.153 0-.323.057-.507.171-.18.114-.312.24-.394.377V9h-1.23V3.765h.847l.25.459c.342-.372.784-.557 1.325-.557.699 0 1.226.188 1.58.566.154-.172.369-.309.644-.41.276-.104.552-.156.828-.156Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "128.9.0",
+  "version": "128.10.1",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Contacts/AddModal/ContactForm/FieldInput.jsx

@@ -22,6 +22,7 @@ const FieldInput = ({
   error,
   helperText,
   label,
+  isInvisible,
   required
 }) => {
   const [id] = useState(uniqueId('field_')) // state only use to generate id once and not at each render
@@ -51,8 +52,8 @@ const FieldInput = ({
       className={cx(
         className,
         styles['contact-form-field__wrapper'],
-        'u-flex',
-        'u-flex-column-s'
+        'u-flex-column-s',
+        { 'u-flex': !isInvisible, 'u-dn': isInvisible }
       )}
     >
       <Field
@@ -103,6 +104,8 @@ FieldInput.propTypes = {
   className: PropTypes.string,
   labelProps: labelPropTypes,
   attributes: fieldInputAttributesTypes,
+  /** Whether the field is visible by the user or not (still in the DOM anyway) */
+  isInvisible: PropTypes.bool,
   contacts: PropTypes.shape({
     data: PropTypes.arrayOf(PropTypes.object)
   }),

package/react/Contacts/AddModal/ContactForm/FieldInputAccordion.jsx

@@ -1,4 +1,3 @@
-import cx from 'classnames'
 import React, { useState } from 'react'
 
 import FieldInput from './FieldInput'
@@ -43,9 +42,10 @@ const FieldInputAccordion = ({
         return (
           <FieldInput
             key={index}
-            className={cx('u-mt-1', { 'u-dn': !showExtended })}
+            className="u-mt-1"
             attributes={attributes}
             name={name}
+            isInvisible={!showExtended}
             label={t(`Contacts.AddModal.ContactForm.fields.${name}`)}
           />
         )

package/react/Contacts/AddModal/ContactForm/FieldInputLayout.jsx

@@ -25,9 +25,10 @@ const FieldInputLayout = ({
 
   return (
     <div
-      className={cx('u-flex u-mt-1', {
+      className={cx('u-mt-1', {
         'u-flex-items-center': !layout,
         'u-flex-items-baseline': !!layout,
+        'u-flex': !isSecondary || showSecondaryFields,
         'u-dn': isSecondary && !showSecondaryFields
       })}
     >

package/react/Contacts/AddModal/ContactForm/contactToFormValues.js

@@ -25,6 +25,7 @@ const contactToFormValues = (contact, t) => {
       jobTitle,
       cozy,
       email,
+      impp,
       name,
       note,
       phone
@@ -62,6 +63,11 @@ const contactToFormValues = (contact, t) => {
             emailLabel: makeItemLabel(item)
           }))
         : [undefined]
+    const matrixValue =
+      impp && impp.length > 0
+        ? impp.find(item => item.label === 'work' && item.protocol === 'matrix')
+            ?.uri || undefined
+        : undefined
     const phoneValue =
       phone && phone.length > 0
         ? movePrimaryToHead(phone).map(item => ({
@@ -81,6 +87,7 @@ const contactToFormValues = (contact, t) => {
       familyName: name?.familyName,
       phone: phoneValue,
       email: emailValue,
+      matrix: matrixValue,
       address: addressValue,
       cozy: cozyValue,
       cozyLabel: cozyLabel,

package/react/Contacts/AddModal/ContactForm/contactToFormValues.spec.js

@@ -16,6 +16,7 @@ describe('contactToFormValues function', () => {
       cozy: undefined,
       cozyLabel: undefined,
       email: [undefined],
+      matrix: undefined,
       familyName: undefined,
       givenName: undefined,
       note: undefined,
@@ -59,6 +60,7 @@ describe('contactToFormValues function', () => {
       jobTitle: undefined,
       cozy: undefined,
       email: undefined,
+      impp: undefined,
       name: {
         givenName: 'Jane',
         familyName: 'Doe'
@@ -76,6 +78,7 @@ describe('contactToFormValues function', () => {
       cozy: undefined,
       cozyLabel: undefined,
       email: [undefined],
+      matrix: undefined,
       givenName: 'Jane',
       familyName: 'Doe',
       note: undefined,
@@ -101,6 +104,7 @@ describe('contactToFormValues function', () => {
       jobTitle: undefined,
       cozy: undefined,
       email: undefined,
+      impp: undefined,
       name: undefined,
       note: 'Eligendi velit eos ab libero molestiae consequatur autem sed.',
       phone: []
@@ -115,6 +119,7 @@ describe('contactToFormValues function', () => {
       cozy: undefined,
       cozyLabel: undefined,
       email: [undefined],
+      matrix: undefined,
       givenName: undefined,
       familyName: undefined,
       note: 'Eligendi velit eos ab libero molestiae consequatur autem sed.',

package/react/Contacts/AddModal/ContactForm/fieldsConfig.jsx

@@ -8,6 +8,7 @@ import CommentIcon from '../../../Icons/Comment'
 import CompanyIcon from '../../../Icons/Company'
 import EmailIcon from '../../../Icons/Email'
 import LocationIcon from '../../../Icons/Location'
+import MatrixIcon from '../../../Icons/Matrix'
 import PeopleIcon from '../../../Icons/People'
 import RelationshipIcon from '../../../Icons/Relationship'
 import TelephoneIcon from '../../../Icons/Telephone'
@@ -140,6 +141,11 @@ export const fields = [
       ]
     }
   },
+  {
+    name: 'matrix',
+    icon: MatrixIcon,
+    type: 'text'
+  },
   {
     name: 'address',
     icon: LocationIcon,

package/react/Contacts/AddModal/ContactForm/formValuesToContact.js

@@ -5,6 +5,7 @@ import {
   removeRelatedContactRelationships,
   createAddress,
   getRelatedContactRelationships,
+  makeImppValues,
   makeTypeAndLabel
 } from './helpers'
 
@@ -18,6 +19,7 @@ const formValuesToContact = ({ formValues, oldContact, t }) => {
     phone,
     email,
     address,
+    matrix,
     cozy,
     company,
     jobTitle,
@@ -62,6 +64,7 @@ const formValuesToContact = ({ formValues, oldContact, t }) => {
             primary: index === 0
           }))
       : [],
+    impp: makeImppValues(oldContactCleaned, matrix),
     address: createAddress({ address, oldContact: oldContactCleaned, t }),
     phone: phone
       ? phone

package/react/Contacts/AddModal/ContactForm/formValuesToContact.spec.js

@@ -83,6 +83,14 @@ describe('formValuesToContact', () => {
           label: undefined
         }
       ],
+      impp: [
+        {
+          uri: 'john@doe.matrix.net',
+          protocol: 'matrix',
+          label: 'work',
+          primary: true
+        }
+      ],
       fullname: 'John J. Doe',
       indexes: {
         byFamilyNameGivenNameEmailCozyUrl:
@@ -160,6 +168,7 @@ describe('formValuesToContact', () => {
           emailLabel: undefined
         }
       ],
+      matrix: 'john@doe.matrix.net',
       familyName: 'Doe',
       givenName: 'Jane',
       note: undefined,
@@ -182,6 +191,14 @@ describe('formValuesToContact', () => {
       cozy: [],
       displayName: 'Jane Doe',
       email: [],
+      impp: [
+        {
+          uri: 'john@doe.matrix.net',
+          protocol: 'matrix',
+          label: 'work',
+          primary: true
+        }
+      ],
       fullname: 'Jane Doe',
       indexes: { byFamilyNameGivenNameEmailCozyUrl: 'doejane' },
       jobTitle: '',
@@ -294,6 +311,7 @@ describe('formValuesToContact', () => {
       birthplace: undefined,
       note: undefined,
       address: [undefined],
+      matrix: undefined,
       email: [undefined],
       phone: [undefined],
       cozy: undefined,
@@ -307,6 +325,25 @@ describe('formValuesToContact', () => {
       jobTitle: '',
       address: [],
       email: [],
+      impp: [
+        {
+          uri: 'john.doe@xmpp.net',
+          protocol: 'xmpp',
+          label: 'home',
+          primary: false
+        },
+        {
+          uri: 'john.doe@xmpp.net',
+          protocol: 'xmpp',
+          label: 'work',
+          primary: false
+        },
+        {
+          uri: 'john@doe.matrix.home',
+          protocol: 'matrix',
+          label: 'home'
+        }
+      ],
       cozy: [],
       phone: [],
       birthday: '',
@@ -335,6 +372,7 @@ describe('formValuesToContact', () => {
       birthplace: '',
       note: '',
       address: [{}],
+      matrix: '',
       email: [{}],
       phone: [{}],
       cozy: '',
@@ -348,6 +386,25 @@ describe('formValuesToContact', () => {
       jobTitle: '',
       address: [],
       email: [],
+      impp: [
+        {
+          uri: 'john.doe@xmpp.net',
+          protocol: 'xmpp',
+          label: 'home',
+          primary: false
+        },
+        {
+          uri: 'john.doe@xmpp.net',
+          protocol: 'xmpp',
+          label: 'work',
+          primary: false
+        },
+        {
+          uri: 'john@doe.matrix.home',
+          protocol: 'matrix',
+          label: 'home'
+        }
+      ],
       cozy: [],
       phone: [],
       birthday: '',

package/react/Contacts/AddModal/ContactForm/helpers.js

@@ -281,6 +281,47 @@ export const makeCustomLabel = (value, t) => {
   return firstString + secondString || null
 }
 
+/**
+ *
+ * @param {import('cozy-client/types/types').IOCozyContact} oldContact - Contact to be modified
+ * @param {string?} value - New URI value to add to the Contact
+ * @returns {{ uri: string, protocol: string, label: string, primary?: boolean }[]}
+ */
+export const makeImppValues = (oldContact, value) => {
+  const _value = value?.trim() || ''
+  const oldImppValues = oldContact?.impp
+
+  if (_value) {
+    if (!oldImppValues || oldImppValues.length === 0) {
+      return [
+        {
+          uri: _value,
+          protocol: 'matrix',
+          label: 'work',
+          primary: true
+        }
+      ]
+    }
+
+    return oldImppValues.map(el => {
+      if (el.protocol === 'matrix' && el.label === 'work') {
+        return { ...el, uri: _value }
+      }
+      return el
+    })
+  }
+
+  return (
+    oldImppValues
+      ?.map(el => {
+        if (el.protocol !== 'matrix' || el.label !== 'work') {
+          return el
+        }
+      })
+      .filter(Boolean) || []
+  )
+}
+
 /**
  *
  * @param {string} name

package/react/Contacts/AddModal/ContactForm/helpers.spec.js

@@ -2,6 +2,7 @@ import {
   moveToHead,
   makeItemLabel,
   makeTypeAndLabel,
+  makeImppValues,
   makeInitialCustomValue
 } from './helpers'
 
@@ -73,6 +74,143 @@ describe('makeTypeAndLabel', () => {
   })
 })
 
+describe('makeImppValues', () => {
+  it('should replace only uri for {label: "work", protocol: "matrix"}', () => {
+    const res = makeImppValues(
+      {
+        impp: [
+          {
+            uri: 'john.doe@xmpp.net',
+            protocol: 'xmpp',
+            label: 'home',
+            primary: false
+          },
+          {
+            uri: 'john.doe@xmpp.net',
+            protocol: 'xmpp',
+            label: 'work',
+            primary: false
+          },
+          {
+            uri: 'john@doe.matrix.net',
+            protocol: 'matrix',
+            label: 'work',
+            primary: true
+          },
+          {
+            uri: 'john@doe.matrix.home',
+            protocol: 'matrix',
+            label: 'home'
+          }
+        ]
+      },
+      'newMatrixURI'
+    )
+
+    expect(res).toStrictEqual([
+      {
+        uri: 'john.doe@xmpp.net',
+        protocol: 'xmpp',
+        label: 'home',
+        primary: false
+      },
+      {
+        uri: 'john.doe@xmpp.net',
+        protocol: 'xmpp',
+        label: 'work',
+        primary: false
+      },
+      {
+        uri: 'newMatrixURI',
+        protocol: 'matrix',
+        label: 'work',
+        primary: true
+      },
+      {
+        uri: 'john@doe.matrix.home',
+        protocol: 'matrix',
+        label: 'home'
+      }
+    ])
+  })
+
+  it('should remove correctly', () => {
+    const res = makeImppValues(
+      {
+        impp: [
+          {
+            uri: 'john.doe@xmpp.net',
+            protocol: 'xmpp',
+            label: 'home',
+            primary: false
+          },
+          {
+            uri: 'john.doe@xmpp.net',
+            protocol: 'xmpp',
+            label: 'work',
+            primary: false
+          },
+          {
+            uri: 'john@doe.matrix.net',
+            protocol: 'matrix',
+            label: 'work',
+            primary: true
+          },
+          {
+            uri: 'john@doe.matrix.home',
+            protocol: 'matrix',
+            label: 'home'
+          }
+        ]
+      },
+      ''
+    )
+
+    expect(res).toStrictEqual([
+      {
+        uri: 'john.doe@xmpp.net',
+        protocol: 'xmpp',
+        label: 'home',
+        primary: false
+      },
+      {
+        uri: 'john.doe@xmpp.net',
+        protocol: 'xmpp',
+        label: 'work',
+        primary: false
+      },
+      {
+        uri: 'john@doe.matrix.home',
+        protocol: 'matrix',
+        label: 'home'
+      }
+    ])
+  })
+
+  it('should add the matrix impp values for the first time if no impp attribute', () => {
+    const expected = [
+      {
+        uri: 'newMatrixURI',
+        protocol: 'matrix',
+        label: 'work',
+        primary: true
+      }
+    ]
+
+    expect(makeImppValues({ impp: undefined }, 'newMatrixURI')).toStrictEqual(
+      expected
+    )
+
+    expect(makeImppValues({ impp: [] }, 'newMatrixURI')).toStrictEqual(expected)
+  })
+
+  it('should not add empty object if value is empty', () => {
+    expect(makeImppValues({ impp: undefined }, '')).toStrictEqual([])
+
+    expect(makeImppValues({ impp: [] }, '')).toStrictEqual([])
+  })
+})
+
 describe('makeInitialCustomValue', () => {
   it('should return undefined if no name', () => {
     const res = makeInitialCustomValue(

package/react/Contacts/AddModal/ContactForm/index.spec.jsx

@@ -21,6 +21,7 @@ const labels = [
   'Phone',
   'Email',
   'Address',
+  'Matrix ID',
   'Twake URL',
   'Company',
   'Job title',
@@ -54,6 +55,7 @@ describe('ContactForm', () => {
     expect(screen.queryByDisplayValue(contact.name.familyName)).not.toBeNull()
     expect(screen.queryByDisplayValue(contact.phone[0].number)).not.toBeNull()
     expect(screen.queryByDisplayValue(contact.email[0].address)).not.toBeNull()
+    expect(screen.queryByDisplayValue(contact.impp[2].uri)).not.toBeNull()
     expect(
       screen.queryByDisplayValue(contact.address[0].formattedAddress)
     ).not.toBeNull()
@@ -78,6 +80,14 @@ describe('ContactForm', () => {
           type: undefined
         }
       ],
+      impp: [
+        {
+          uri: '123-matrixID-456',
+          protocol: 'matrix',
+          label: 'work',
+          primary: true
+        }
+      ],
       birthday: '2015-12-31',
       birthplace: 'somewhere',
       gender: 'male',
@@ -124,6 +134,7 @@ describe('ContactForm', () => {
       additionalName: '',
       'phone[0].phone': '+33678987654',
       'email[0].email': 'jcvc@cozy.cloud',
+      matrix: '123-matrixID-456',
       cozy: 'https://jcvd.cozy.cloud',
       company: 'Cozy CLoud',
       jobTitle: 'Dreamer',
@@ -171,6 +182,7 @@ describe('ContactForm', () => {
       Lastname: 'Van Cozy',
       Phone: '+33678987654',
       Email: 'jcvc@cozy.cloud',
+      Matrix: '123-matrixID-456',
       Address: '18 rue des fleurs, Pecado',
       'Twake URL': 'https://jcvd.cozy.cloud',
       Company: 'Cozy CLoud',

package/react/Contacts/AddModal/ContactForm/locales/en.json

@@ -15,6 +15,7 @@
           "familyName": "Lastname",
           "phone": "Phone",
           "email": "Email",
+          "matrix": "Matrix ID",
           "address": "Address",
           "cozy": "Twake URL",
           "company": "Company",

package/react/Contacts/AddModal/ContactForm/locales/fr.json

@@ -16,6 +16,7 @@
           "phone": "Téléphone",
           "email": "Email",
           "address": "Adresse",
+          "matrix": "ID Matrix",
           "cozy": "URL du Twake",
           "company": "Entreprise",
           "jobTitle": "Fonction",

package/react/Contacts/AddModal/Readme.md

@@ -8,7 +8,7 @@ import ContactsAddModal from 'cozy-ui/transpiled/react/Contacts/AddModal'
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import { johnDoeContact, johnDoeFormValues } from 'cozy-ui/transpiled/react/Contacts/AddModal/mocks'
+import { johnDoeContact } from 'cozy-ui/transpiled/react/Contacts/AddModal/mocks'
 import contacts from 'cozy-ui/transpiled/react/ContactsList/_mockContacts.json'
 import Variants from 'cozy-ui/docs/components/Variants'
 

package/react/Contacts/AddModal/mocks.js

@@ -30,6 +30,31 @@ export const johnDoeContact = {
       primary: true
     }
   ],
+  impp: [
+    {
+      uri: 'john.doe@xmpp.net',
+      protocol: 'xmpp',
+      label: 'home',
+      primary: false
+    },
+    {
+      uri: 'john.doe@xmpp.net',
+      protocol: 'xmpp',
+      label: 'work',
+      primary: false
+    },
+    {
+      uri: 'john@doe.matrix.net',
+      protocol: 'matrix',
+      label: 'work',
+      primary: true
+    },
+    {
+      uri: 'john@doe.matrix.home',
+      protocol: 'matrix',
+      label: 'home'
+    }
+  ],
   birthday: '1999-5-1',
   birthplace: 'somewhere',
   gender: 'male',
@@ -71,6 +96,7 @@ export const johnDoeFormValues = {
   gender: 'male',
   cozy: 'https://johndoe.mycozy.cloud',
   cozyLabel: '{"type":"MyCozy"}',
+  matrix: 'john@doe.matrix.net',
   address: [
     {
       fieldId: 'fieldId_1',
@@ -167,6 +193,20 @@ export const johnDoeContactWithRelated = {
       type: 'Work'
     }
   ],
+  impp: [
+    {
+      uri: 'john.doe@xmpp.net',
+      protocol: 'xmpp',
+      label: 'home',
+      primary: false
+    },
+    {
+      uri: 'john@doe.matrix.net',
+      protocol: 'matrix',
+      label: 'work',
+      primary: true
+    }
+  ],
   email: [
     {
       address: 'john.doe@posteo.net',
@@ -211,7 +251,6 @@ export const johnDoeContactWithRelated = {
       primary: false
     }
   ],
-
   relationships: {
     accounts: { data: [] },
     groups: { data: [] },