cozy-ui 128.8.0 → 128.10.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [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)
+
+
+### Bug Fixes
+
+* **ContactForm:** Remove button position wasn't correct on mobile ([d96647f](https://github.com/cozy/cozy-ui/commit/d96647f))
+
+
+### Features
+
+* **ContactForm/FieldInput:** Add className prop ([38d48f5](https://github.com/cozy/cozy-ui/commit/38d48f5))
+* **ContactForm:** Add `isSecondary` attribute ([ff1bf5f](https://github.com/cozy/cozy-ui/commit/ff1bf5f))
+* **ContactForm:** Add FieldInputAccordion component ([f285990](https://github.com/cozy/cozy-ui/commit/f285990))
+
 # [128.8.0](https://github.com/cozy/cozy-ui/compare/v128.7.0...v128.8.0) (2025-09-09)
 
 

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.8.0",
+  "version": "128.10.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

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

@@ -16,6 +16,7 @@ import { fieldInputAttributesTypes, labelPropTypes } from '../types'
 const FieldInput = ({
   name,
   labelProps,
+  className,
   attributes: { subFields, ...restAttributes },
   contacts,
   error,
@@ -48,6 +49,7 @@ const FieldInput = ({
   return (
     <div
       className={cx(
+        className,
         styles['contact-form-field__wrapper'],
         'u-flex',
         'u-flex-column-s'
@@ -98,6 +100,7 @@ const FieldInput = ({
 
 FieldInput.propTypes = {
   name: PropTypes.string.isRequired,
+  className: PropTypes.string,
   labelProps: labelPropTypes,
   attributes: fieldInputAttributesTypes,
   contacts: PropTypes.shape({

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

@@ -0,0 +1,57 @@
+import cx from 'classnames'
+import React, { useState } from 'react'
+
+import FieldInput from './FieldInput'
+import { locales } from './locales'
+import Icon from '../../../Icon'
+import IconButton from '../../../IconButton'
+import DropdownIcon from '../../../Icons/Dropdown'
+import DropupIcon from '../../../Icons/Dropup'
+import { useI18n, useExtendI18n } from '../../../providers/I18n'
+
+const FieldInputAccordion = ({
+  attributes: { name, label, subFields, ...restAttributes },
+  contacts,
+  error,
+  helperText
+}) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const [showExtended, setShowExtended] = useState(false)
+
+  return (
+    <>
+      <div className="u-flex u-flex-items-baseline">
+        <FieldInput
+          attributes={restAttributes}
+          contacts={contacts}
+          error={error}
+          helperText={helperText}
+          name={name}
+          label={t(`Contacts.AddModal.ContactForm.fields.${name}`)}
+          labelProps={label}
+        />
+        <IconButton
+          className="u-ml-half"
+          size="medium"
+          onClick={() => setShowExtended(v => !v)}
+        >
+          <Icon icon={showExtended ? DropupIcon : DropdownIcon} />
+        </IconButton>
+      </div>
+      {subFields.map(({ name, ...attributes }, index) => {
+        return (
+          <FieldInput
+            key={index}
+            className={cx('u-mt-1', { 'u-dn': !showExtended })}
+            attributes={attributes}
+            name={name}
+            label={t(`Contacts.AddModal.ContactForm.fields.${name}`)}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+export default FieldInputAccordion

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

@@ -36,7 +36,7 @@ const FieldInputArray = ({
               return (
                 <div
                   key={key}
-                  className={cx('u-flex u-flex-items-center', {
+                  className={cx('u-flex u-flex-items-baseline', {
                     'u-mt-1': index !== 0
                   })}
                 >

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import FieldInput from './FieldInput'
+import FieldInputAccordion from './FieldInputAccordion'
 import FieldInputArray from './FieldInputArray'
 import { fieldsRequired } from './helpers'
 import { locales } from './locales'
@@ -10,8 +11,9 @@ import Icon from '../../../Icon'
 import { useI18n, useExtendI18n } from '../../../providers/I18n'
 
 const FieldInputLayout = ({
-  attributes: { isArray, icon, ...attributes }, // ⚠️ isArray and icon here are removed from attributes to avoid DOM propagration
+  attributes: { layout, icon, isSecondary, ...attributes }, // ⚠️ `layout` `icon` `isSecondary` here are removed from attributes to avoid DOM propagration
   contacts,
+  showSecondaryFields,
   formProps
 }) => {
   useExtendI18n(locales)
@@ -24,20 +26,28 @@ const FieldInputLayout = ({
   return (
     <div
       className={cx('u-flex u-mt-1', {
-        'u-flex-items-center': !isArray,
-        'u-flex-items-baseline': isArray
+        'u-flex-items-center': !layout,
+        'u-flex-items-baseline': !!layout,
+        'u-dn': isSecondary && !showSecondaryFields
       })}
     >
       <div className="u-w-2-half">
         {icon && <Icon icon={icon} color="var(--iconTextColor)" />}
       </div>
       <div className="u-w-100">
-        {isArray ? (
+        {layout === 'array' ? (
           <FieldInputArray
             attributes={attributes}
             contacts={contacts}
             formProps={formProps}
           />
+        ) : layout === 'accordion' ? (
+          <FieldInputAccordion
+            attributes={attributes}
+            contacts={contacts}
+            error={isError}
+            helperText={isError ? errors[name] : null}
+          />
         ) : (
           <FieldInput
             attributes={restAttributes}

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

@@ -8,8 +8,8 @@ import { makeItemLabel, makeRelatedContact, movePrimaryToHead } from './helpers'
 const contactToFormValues = (contact, t) => {
   // initialize the form values, required so that array fields start with at least one editable field
   const initialFieldValues = fields.reduce(
-    (initialValues, { name, isArray }) => {
-      initialValues[name] = isArray ? [undefined] : undefined
+    (initialValues, { name, layout }) => {
+      initialValues[name] = layout === 'array' ? [undefined] : undefined
       return initialValues
     },
     {}
@@ -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'
@@ -35,37 +36,44 @@ export const fields = [
   {
     name: 'givenName',
     icon: null,
-    type: 'text'
-  },
-  {
-    name: 'additionalName',
-    icon: null,
-    type: 'text'
+    type: 'text',
+    layout: 'accordion',
+    subFields: [
+      {
+        name: 'additionalName',
+        icon: null,
+        type: 'text'
+      },
+      {
+        name: 'surname',
+        icon: null,
+        type: 'text'
+      }
+    ]
   },
   {
     name: 'familyName',
     icon: null,
     type: 'text'
   },
-  {
-    name: 'surname',
-    icon: null,
-    type: 'text'
-  },
   {
     name: 'company',
     icon: CompanyIcon,
-    type: 'text'
-  },
-  {
-    name: 'jobTitle',
-    icon: null,
-    type: 'text'
+    type: 'text',
+    layout: 'accordion',
+    subFields: [
+      {
+        name: 'jobTitle',
+        icon: null,
+        type: 'text'
+      }
+    ]
   },
   {
     name: 'phone',
     icon: TelephoneIcon,
     type: 'tel',
+    layout: 'array',
     label: {
       name: 'phoneLabel',
       select: true,
@@ -103,13 +111,13 @@ export const fields = [
           label: 'Contacts.AddModal.ContactForm.label.phone.fax-work'
         }
       ]
-    },
-    isArray: true
+    }
   },
   {
     name: 'email',
     icon: EmailIcon,
     type: 'email',
+    layout: 'array',
     label: {
       name: 'emailLabel',
       select: true,
@@ -131,13 +139,18 @@ export const fields = [
           label: 'Contacts.AddModal.ContactForm.label.work'
         }
       ]
-    },
-    isArray: true
+    }
+  },
+  {
+    name: 'matrix',
+    icon: MatrixIcon,
+    type: 'text'
   },
   {
     name: 'address',
     icon: LocationIcon,
     type: 'text',
+    layout: 'array',
     InputProps: {
       readOnly: true
     },
@@ -224,13 +237,19 @@ export const fields = [
           label: 'Contacts.AddModal.ContactForm.label.address.work'
         }
       ]
-    },
-    isArray: true
+    }
+  },
+  {
+    name: 'note',
+    icon: CommentIcon,
+    type: 'text',
+    multiline: true
   },
   {
     name: 'cozy',
     icon: CloudIcon,
     type: 'url',
+    isSecondary: true,
     label: {
       name: 'cozyLabel',
       select: true,
@@ -258,16 +277,20 @@ export const fields = [
     name: 'birthday',
     icon: CalendarIcon,
     type: 'date',
+    isSecondary: true,
     InputLabelProps: { shrink: true }
   },
   {
     name: 'birthplace',
     icon: null,
-    type: 'text'
+    type: 'text',
+    isSecondary: true
   },
   {
     name: 'relatedContact',
     icon: RelationshipIcon,
+    layout: 'array',
+    isSecondary: true,
     InputProps: {
       readOnly: true,
       endAdornment: (
@@ -329,13 +352,6 @@ export const fields = [
           label: 'Contacts.AddModal.ContactForm.label.relationship.recipient'
         }
       ]
-    },
-    isArray: true
-  },
-  {
-    name: 'note',
-    icon: CommentIcon,
-    type: 'text',
-    multiline: true
+    }
   }
 ]

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