cozy-ui 130.7.2 → 130.8.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [130.8.0](https://github.com/cozy/cozy-ui/compare/v130.7.2...v130.8.0) (2025-10-14)
+
+
+### Bug Fixes
+
+* **AddModal/ContactForm:** Now hide "other fields" button if no secondary field ([bbba734](https://github.com/cozy/cozy-ui/commit/bbba734))
+
+
+### Features
+
+* **AddModal/ContactForm:** Add `customFieldsProps` prop ([b7d0e60](https://github.com/cozy/cozy-ui/commit/b7d0e60))
+* **AddModal/ContactForm:** Add makeFields func ([f1e453b](https://github.com/cozy/cozy-ui/commit/f1e453b))
+* **AddModal/ContactForm:** Add possiblity to customize fields component ([f600cdd](https://github.com/cozy/cozy-ui/commit/f600cdd))
+
 ## [130.7.2](https://github.com/cozy/cozy-ui/compare/v130.7.1...v130.7.2) (2025-10-10)
 
 

package/package.json

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

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

@@ -9,20 +9,22 @@ import { FieldInputWrapperPropTypes } from '../types'
 // between Field from react-final-form and TextField from Mui
 const FieldInputWrapper = ({
   input,
-  attributes,
+  attributes: { component, ...restAttributes },
   variant,
   fullWidth,
   ...props
 }) => {
-  const Component = attributes.customLabelOptions
-    ? TextFieldCustomLabelSelect
-    : attributes?.select
-    ? TextFieldSelect
-    : TextField
+  const Component =
+    component ||
+    (restAttributes.customLabelOptions
+      ? TextFieldCustomLabelSelect
+      : restAttributes?.select
+      ? TextFieldSelect
+      : TextField)
 
   return (
     <Component
-      {...attributes}
+      {...restAttributes}
       {...input}
       {...props}
       variant={variant}

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

@@ -5,7 +5,7 @@ import { getFormattedAddress } from 'cozy-client/dist/models/contact'
 import { fields } from './fieldsConfig'
 import { makeItemLabel, makeRelatedContact, movePrimaryToHead } from './helpers'
 
-const contactToFormValues = (contact, t) => {
+const contactToFormValues = ({ contact, makeCustomContactValues, t }) => {
   // initialize the form values, required so that array fields start with at least one editable field
   const initialFieldValues = fields.reduce(
     (initialValues, { name, layout }) => {
@@ -79,7 +79,10 @@ const contactToFormValues = (contact, t) => {
 
     const relatedContactValue = makeRelatedContact(contact)
 
+    const customValues = makeCustomContactValues?.(contact) || {}
+
     return {
+      ...customValues,
       gender,
       givenName: name?.givenName,
       additionalName: name?.additionalName,

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

@@ -24,7 +24,7 @@ describe('contactToFormValues function', () => {
       relatedContact: [undefined]
     }
 
-    const result = contactToFormValues(null, tSpy)
+    const result = contactToFormValues({ contact: null, t: tSpy })
     expect(result).toEqual(expected)
   })
 
@@ -34,7 +34,7 @@ describe('contactToFormValues function', () => {
       '426 Runolfsson Knolls 84573 Port Easter Cocos (Keeling) Islands'
     )
 
-    const result = contactToFormValues(johnDoeContact, tSpy)
+    const result = contactToFormValues({ contact: johnDoeContact, t: tSpy })
     expect(result).toEqual(expected)
     expect(tSpy).toHaveBeenCalledWith('formatted.address', {
       street: '426 Runolfsson Knolls',
@@ -86,7 +86,7 @@ describe('contactToFormValues function', () => {
       relatedContact: [undefined]
     }
 
-    const result = contactToFormValues(contact, tSpy)
+    const result = contactToFormValues({ contact, t: tSpy })
     expect(result).toEqual(expected)
   })
 
@@ -127,7 +127,7 @@ describe('contactToFormValues function', () => {
       relatedContact: [undefined]
     }
 
-    const result = contactToFormValues(contact, tSpy)
+    const result = contactToFormValues({ contact, t: tSpy })
     expect(result).toEqual(expected)
   })
 })

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

@@ -15,7 +15,7 @@ import TelephoneIcon from '../../../Icons/Telephone'
 import InputAdornment from '../../../InputAdornment'
 
 /**
- * @type {import('../../../types').Field[]}
+ * @type {import('../types').Field[]}
  */
 export const fields = [
   {

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

@@ -9,7 +9,12 @@ import {
   makeTypeAndLabel
 } from './helpers'
 
-const formValuesToContact = ({ formValues, oldContact, t }) => {
+const formValuesToContact = ({
+  formValues,
+  oldContact,
+  makeCustomFieldsFormValues,
+  t
+}) => {
   const {
     gender,
     givenName,
@@ -45,8 +50,11 @@ const formValuesToContact = ({ formValues, oldContact, t }) => {
     }
   }
 
+  const customFieldsFormValues = makeCustomFieldsFormValues?.(formValues) || {}
+
   const contactWithFormValues = {
     ...oldContactCleaned,
+    ...customFieldsFormValues,
     gender: gender || '',
     name: {
       ...oldContactCleaned?.name,

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

@@ -94,8 +94,10 @@ export const createAddress = ({ address, oldContact, t }) => {
         .filter(val => val && val.address)
         .map((addressField, index) => {
           const oldContactAddress = oldContact?.address?.[index]
-          const oldContactFormValues = contactToFormValues(oldContact, t)
-            ?.address?.[index]
+          const oldContactFormValues = contactToFormValues({
+            contact: oldContact,
+            t
+          })?.address?.[index]
 
           const addressHasBeenModified = !isEqual(
             addressField,
@@ -138,7 +140,7 @@ export const createAddress = ({ address, oldContact, t }) => {
 }
 
 /**
- * @param {(import('../../../types').RelatedContact|undefined)[]} relatedContact - The related contacts array
+ * @param {(import('../types').RelatedContact|undefined)[]} relatedContact - The related contacts array
  * @returns {Record<string, { data: { _id: string, _type: string }[] }>} - The related contacts relationships
  */
 export const getRelatedContactRelationships = relatedContact => {
@@ -218,7 +220,7 @@ export const removeAsscociatedData = contact => {
 
 /**
  * @param {import('cozy-client/types/types').IOCozyContact} contact
- * @returns {import('../../../types').RelatedContact[]}
+ * @returns {import('../types').RelatedContact[]}
  */
 export const makeRelatedContact = contact => {
   if (
@@ -368,3 +370,24 @@ export const makeInitialCustomValue = (name, value) => {
     return JSON.stringify({ type: valueObj.type, label: valueObj.label })
   }
 }
+
+/**
+ * @param {(import('../types').Field)[]|undefined} customFields
+ * @param {(import('../types').Field)[]} defaultFields
+ * @returns {(import('../types').Field)[]}
+ */
+export const makeFields = (customFields, defaultFields) => {
+  if (!customFields) {
+    return defaultFields
+  }
+
+  const fields = [...defaultFields]
+
+  customFields.map(customField => {
+    if (customField.position) {
+      fields.splice(customField.position, 0, customField)
+    }
+  })
+
+  return fields
+}

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

@@ -6,6 +6,7 @@ import {
   makeTypeAndLabel,
   makeImppValues,
   makeCustomLabel,
+  makeFields,
   makeInitialCustomValue
 } from './helpers'
 import { locales } from './locales'
@@ -323,3 +324,68 @@ describe('makeInitialCustomValue', () => {
     })
   })
 })
+
+describe('makeFields', () => {
+  it('should return custom fields at custom position', () => {
+    const customFields = [
+      { name: 'middlename', position: 1 },
+      { name: 'birthday', position: 3 }
+    ]
+    const defaultFields = [{ name: 'firstname' }, { name: 'lastname' }]
+
+    const res = makeFields(customFields, defaultFields)
+
+    expect(res).toStrictEqual([
+      { name: 'firstname' },
+      { name: 'middlename', position: 1 },
+      { name: 'lastname' },
+      { name: 'birthday', position: 3 }
+    ])
+  })
+
+  it('should ignore custom fields without position value', () => {
+    const customFields = [
+      { name: 'middlename', position: 1 },
+      { name: 'field-with-no-position' }
+    ]
+    const defaultFields = [{ name: 'firstname' }, { name: 'lastname' }]
+
+    const res = makeFields(customFields, defaultFields)
+
+    expect(res).toStrictEqual([
+      { name: 'firstname' },
+      { name: 'middlename', position: 1 },
+      { name: 'lastname' }
+    ])
+  })
+
+  it('should not mutate the original arrays', () => {
+    const customFields = [
+      { name: 'middlename', position: 1 },
+      { name: 'field-with-no-position' },
+      { name: 'birthday', position: 3 }
+    ]
+    const defaultFields = [{ name: 'firstname' }, { name: 'lastname' }]
+
+    makeFields(customFields, defaultFields)
+
+    expect(defaultFields).toStrictEqual([
+      { name: 'firstname' },
+      { name: 'lastname' }
+    ])
+
+    expect(customFields).toStrictEqual([
+      { name: 'middlename', position: 1 },
+      { name: 'field-with-no-position' },
+      { name: 'birthday', position: 3 }
+    ])
+  })
+
+  it('should handle undefined custom fields', () => {
+    const defaultFields = [{ name: 'firstname' }, { name: 'lastname' }]
+
+    const res = makeFields(undefined, defaultFields)
+
+    expect(res).toStrictEqual(defaultFields)
+  })
+})

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

@@ -6,9 +6,9 @@ import { getHasManyItems } from 'cozy-client/dist/associations/HasMany'
 
 import FieldInputLayout from './FieldInputLayout'
 import contactToFormValues from './contactToFormValues'
-import { fields } from './fieldsConfig'
+import { fields as defaultFields } from './fieldsConfig'
 import formValuesToContact from './formValuesToContact'
-import { validateFields } from './helpers'
+import { validateFields, makeFields } from './helpers'
 import { locales } from './locales'
 import Button from '../../../Buttons'
 import { useI18n, useExtendI18n } from '../../../providers/I18n'
@@ -31,24 +31,41 @@ export function getSubmitContactForm() {
 /**
  *
  * @param {object} params
+ * @param {{ data: Array<object> }} params.contacts
  * @param {import('cozy-client/types/types').IOCozyContact} params.contact
+ * @param {Object} params.customFieldsProps
  * @param {func} params.onSubmit
- * @param {{ data: Array<object> }} params.contacts
  * @returns
  */
-const ContactForm = ({ contact, onSubmit, contacts }) => {
+const ContactForm = ({ contacts, contact, customFieldsProps, onSubmit }) => {
   const [showSecondaryFields, setShowSecondaryFields] = useState(false)
   useExtendI18n(locales)
   const { t } = useI18n()
+  const { fields, makeCustomFieldsFormValues, makeCustomContactValues } =
+    customFieldsProps
+
+  const _fields = makeFields(fields, defaultFields)
+  const hasSecondaryFields = _fields.some(el => el.isSecondary)
 
   return (
     <Form
       mutators={{ ...arrayMutators }}
+      initialValues={contactToFormValues({
+        contact,
+        makeCustomContactValues,
+        t
+      })}
       validate={values => validateFields(values, t)}
       onSubmit={formValues =>
-        onSubmit(formValuesToContact({ formValues, oldContact: contact, t }))
+        onSubmit(
+          formValuesToContact({
+            formValues,
+            oldContact: contact,
+            makeCustomFieldsFormValues,
+            t
+          })
+        )
       }
-      initialValues={contactToFormValues(contact, t)}
       render={({ handleSubmit, valid, submitFailed, errors }) => {
         setSubmitContactForm(handleSubmit)
         return (
@@ -57,7 +74,7 @@ const ContactForm = ({ contact, onSubmit, contacts }) => {
             onSubmit={handleSubmit}
             className="u-flex u-flex-column"
           >
-            {fields.map((attributes, index) => (
+            {_fields.map((attributes, index) => (
               <FieldInputLayout
                 key={index}
                 attributes={attributes}
@@ -70,7 +87,7 @@ const ContactForm = ({ contact, onSubmit, contacts }) => {
                 }}
               />
             ))}
-            {!showSecondaryFields && (
+            {hasSecondaryFields && !showSecondaryFields && (
               <div>
                 <Button
                   className="u-db u-ml-2 u-mt-1"
@@ -87,6 +104,10 @@ const ContactForm = ({ contact, onSubmit, contacts }) => {
   )
 }
 
+ContactForm.defaultProps = {
+  customFieldsProps: {}
+}
+
 // Used to avoid unnecessary multiple rendering of ContactForm when creating a new contact in another way.
 // These unnecessary renderings prevented the addition of a newly created linked contact. (Creation of a contact when selecting a linked contact)
 export const isSameContactProp = (prevProps, nextProps) => {

package/react/Contacts/AddModal/Readme.md

@@ -4,6 +4,8 @@ Works with `final-form`, `final-form-arrays`, `react-final-form` and `react-fina
 
 ```jsx
 import { useState } from 'react'
+import StarIcon from 'cozy-ui/transpiled/react/Icons/Star'
+import TextField from 'cozy-ui/transpiled/react/TextField'
 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'
@@ -13,7 +15,7 @@ import contacts from 'cozy-ui/transpiled/react/ContactsList/_mockContacts.json'
 import Variants from 'cozy-ui/docs/components/Variants'
 
 initialState = { showModal: isTesting() }
-initialVariants = [{ withContact: false }]
+initialVariants = [{ withContact: false, withCustomFields: false }]
 
 const open = () => setState({ showModal: true })
 const close = () => setState({ showModal: false })
@@ -22,18 +24,25 @@ const handleSubmit = async formData => {
   console.info('formData :', formData)
 }
 
+const customFields = [{ name: 'customField', icon: StarIcon, type: 'text', position: 5, component: TextField }]
+
 ;
 
-<DemoProvider>
+<DemoProvider dictRequire={() => ({ Contacts: {AddModal: {ContactForm: {fields: {customField: 'Custom field'}}}} })}>
   <AlertProvider>
-    <Variants initialVariants={initialVariants} screenshotAllVariants>
+    <Variants initialVariants={initialVariants}>
       {variant => (
         <>
           <Button onClick={open} label="Open Modal" />
           {state.showModal && (
             <ContactsAddModal
               contacts={{ data: contacts }}
-              contact={variant.withContact ? johnDoeContact : undefined}
+              contact={variant.withContact ? {...johnDoeContact, customField: "Custom field value"} : undefined}
+              customFieldsProps={variant.withCustomFields && {
+                fields: customFields,
+                makeCustomFieldsFormValues: formValues => ({ customField: formValues.customField }),
+                makeCustomContactValues: contact => ({ customField: contact.customField })
+              }}
               onSubmit={handleSubmit}
               onClose={close}
             />

package/react/Contacts/AddModal/index.jsx

@@ -7,7 +7,13 @@ import { FixedDialog } from '../../CozyDialogs'
 import { useAlert } from '../../providers/Alert'
 import { useI18n, useExtendI18n } from '../../providers/I18n'
 
-const AddModal = ({ contacts, contact, onSubmit, onClose }) => {
+const AddModal = ({
+  contacts,
+  contact,
+  customFieldsProps,
+  onSubmit,
+  onClose
+}) => {
   useExtendI18n(locales)
   const { t } = useI18n()
   const { showAlert } = useAlert()
@@ -52,6 +58,7 @@ const AddModal = ({ contacts, contact, onSubmit, onClose }) => {
         <ContactForm
           contacts={contacts}
           contact={selfContact}
+          customFieldsProps={customFieldsProps}
           onSubmit={handleFormSubmit}
         />
       }

package/react/Contacts/AddModal/types.js

@@ -2,6 +2,51 @@ import PropTypes from 'prop-types'
 
 import { iconPropType } from '../../Icon'
 
+/**
+ * @typedef {'text'|'tel'|'email'|'button'|'url'|'date'} FieldType
+ */
+
+/**
+ * @typedef {Object} CustomLabelOptions
+ * @property {string} defaultType - The default type of the option
+ * @property {string} defaultLabel - The default label of the option
+ * @property {boolean} [hide] - Whether the radio choices is hidden
+ */
+
+/**
+ * @typedef {Object} LabelField
+ * @property {string} name - The name of the label field
+ * @property {boolean} select - Whether the field is a select
+ * @property {CustomLabelOptions} customLabelOptions - The custom label field options
+ * @property {Option[]} options - The options of the label field
+ */
+
+/**
+ * @typedef {Object} InputLabelProps
+ * @property {boolean} shrink - passed to InputLabelProps props
+ */
+
+/**
+ * @typedef {Object} Field
+ * @property {string} name - The name of the field
+ * @property {string|null} icon - The icon of the field
+ * @property {FieldType} type - The type of the field
+ * @property {boolean} [isSecondary] -  Whether the field is hidden from the main form
+ * @property {LabelField} [label] - Add a "label" field next to the main field
+ * @property {'accordion'|'array'} [layout] - Whether the field is an array (To add fields dynamically (e.g. email, address, etc.))
+ * @property {Field[]} [subFields] - The subfields of the field
+ * @property {InputLabelProps} [InputLabelProps] - The object passed to InputLabelProps props
+ * @property {boolean} [multiline] - Whether the field is multiline
+ * @property {number} [position] - Position of a field in the form. 1 is first.
+ */
+
+/**
+ * @typedef {Object} RelatedContact
+ * @property {string} relatedContactId - The id of the related contact
+ * @property {string} relatedContact - The displayName of the related contact
+ * @property {string} relatedContactLabel - Object with the type of the related contact stringified (e.g. '{\"type\":\"spouse\"}')
+ */
+
 export const labelPropTypes = PropTypes.shape({
   name: PropTypes.string,
   options: PropTypes.arrayOf(

package/transpiled/react/Contacts/AddModal/ContactForm/FieldInputWrapper.d.ts

@@ -1,8 +1,11 @@
 export default FieldInputWrapper;
-declare function FieldInputWrapper({ input, attributes, variant, fullWidth, ...props }: {
+declare function FieldInputWrapper({ input, attributes: { component, ...restAttributes }, variant, fullWidth, ...props }: {
     [x: string]: any;
     input: any;
-    attributes: any;
+    attributes: {
+        [x: string]: any;
+        component: any;
+    };
     variant: any;
     fullWidth: any;
 }): JSX.Element;

package/transpiled/react/Contacts/AddModal/ContactForm/FieldInputWrapper.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["input", "attributes", "variant", "fullWidth"];
+var _excluded = ["component"],
+    _excluded2 = ["input", "attributes", "variant", "fullWidth"];
 import React from 'react';
 import TextFieldCustomLabelSelect from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/TextFieldCustomLabelSelect";
 import TextFieldSelect from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/TextFieldSelect";
@@ -10,13 +11,15 @@ import { FieldInputWrapperPropTypes } from "cozy-ui/transpiled/react/Contacts/Ad
 
 var FieldInputWrapper = function FieldInputWrapper(_ref) {
   var input = _ref.input,
-      attributes = _ref.attributes,
+      _ref$attributes = _ref.attributes,
+      component = _ref$attributes.component,
+      restAttributes = _objectWithoutProperties(_ref$attributes, _excluded),
       variant = _ref.variant,
       fullWidth = _ref.fullWidth,
-      props = _objectWithoutProperties(_ref, _excluded);
+      props = _objectWithoutProperties(_ref, _excluded2);
 
-  var Component = attributes.customLabelOptions ? TextFieldCustomLabelSelect : attributes !== null && attributes !== void 0 && attributes.select ? TextFieldSelect : TextField;
-  return /*#__PURE__*/React.createElement(Component, _extends({}, attributes, input, props, {
+  var Component = component || (restAttributes.customLabelOptions ? TextFieldCustomLabelSelect : restAttributes !== null && restAttributes !== void 0 && restAttributes.select ? TextFieldSelect : TextField);
+  return /*#__PURE__*/React.createElement(Component, _extends({}, restAttributes, input, props, {
     variant: variant,
     fullWidth: fullWidth,
     minRows: "2"

package/transpiled/react/Contacts/AddModal/ContactForm/contactToFormValues.d.ts

@@ -1,2 +1,6 @@
 export default contactToFormValues;
-declare function contactToFormValues(contact: any, t: any): any;
+declare function contactToFormValues({ contact, makeCustomContactValues, t }: {
+    contact: any;
+    makeCustomContactValues: any;
+    t: any;
+}): any;

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

@@ -1,13 +1,22 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import uniqueId from 'lodash/uniqueId';
 import { getFormattedAddress } from 'cozy-client/dist/models/contact';
 import { fields } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/fieldsConfig";
 import { makeItemLabel, makeRelatedContact, movePrimaryToHead } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/helpers";
 
-var contactToFormValues = function contactToFormValues(contact, t) {
+var contactToFormValues = function contactToFormValues(_ref) {
+  var contact = _ref.contact,
+      makeCustomContactValues = _ref.makeCustomContactValues,
+      t = _ref.t;
   // initialize the form values, required so that array fields start with at least one editable field
-  var initialFieldValues = fields.reduce(function (initialValues, _ref) {
-    var name = _ref.name,
-        layout = _ref.layout;
+  var initialFieldValues = fields.reduce(function (initialValues, _ref2) {
+    var name = _ref2.name,
+        layout = _ref2.layout;
     initialValues[name] = layout === 'array' ? [undefined] : undefined;
     return initialValues;
   }, {});
@@ -68,7 +77,8 @@ var contactToFormValues = function contactToFormValues(contact, t) {
       };
     }) : [undefined];
     var relatedContactValue = makeRelatedContact(contact);
-    return {
+    var customValues = (makeCustomContactValues === null || makeCustomContactValues === void 0 ? void 0 : makeCustomContactValues(contact)) || {};
+    return _objectSpread(_objectSpread({}, customValues), {}, {
       gender: gender,
       givenName: name === null || name === void 0 ? void 0 : name.givenName,
       additionalName: name === null || name === void 0 ? void 0 : name.additionalName,
@@ -86,7 +96,7 @@ var contactToFormValues = function contactToFormValues(contact, t) {
       birthplace: birthplace,
       note: note,
       relatedContact: relatedContactValue
-    };
+    });
   }
 
   return initialFieldValues;

package/transpiled/react/Contacts/AddModal/ContactForm/fieldsConfig.d.ts

@@ -1,4 +1,4 @@
 /**
- * @type {import('../../../types').Field[]}
+ * @type {import('../types').Field[]}
  */
-export const fields: any[];
+export const fields: import('../types').Field[];

package/transpiled/react/Contacts/AddModal/ContactForm/fieldsConfig.js

@@ -13,7 +13,7 @@ import RelationshipIcon from "cozy-ui/transpiled/react/Icons/Relationship";
 import TelephoneIcon from "cozy-ui/transpiled/react/Icons/Telephone";
 import InputAdornment from "cozy-ui/transpiled/react/InputAdornment";
 /**
- * @type {import('../../../types').Field[]}
+ * @type {import('../types').Field[]}
  */
 
 export var fields = [{

package/transpiled/react/Contacts/AddModal/ContactForm/formValuesToContact.d.ts

@@ -1,6 +1,7 @@
 export default formValuesToContact;
-declare function formValuesToContact({ formValues, oldContact, t }: {
+declare function formValuesToContact({ formValues, oldContact, makeCustomFieldsFormValues, t }: {
     formValues: any;
     oldContact: any;
+    makeCustomFieldsFormValues: any;
     t: any;
 }): any;

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

@@ -10,6 +10,7 @@ import { removeAsscociatedData, removeRelatedContactRelationships, createAddress
 var formValuesToContact = function formValuesToContact(_ref) {
   var formValues = _ref.formValues,
       oldContact = _ref.oldContact,
+      makeCustomFieldsFormValues = _ref.makeCustomFieldsFormValues,
       t = _ref.t;
   var gender = formValues.gender,
       givenName = formValues.givenName,
@@ -37,7 +38,9 @@ var formValuesToContact = function formValuesToContact(_ref) {
     }
   });
 
-  var contactWithFormValues = _objectSpread(_objectSpread({}, oldContactCleaned), {}, {
+  var customFieldsFormValues = (makeCustomFieldsFormValues === null || makeCustomFieldsFormValues === void 0 ? void 0 : makeCustomFieldsFormValues(formValues)) || {};
+
+  var contactWithFormValues = _objectSpread(_objectSpread(_objectSpread({}, oldContactCleaned), customFieldsFormValues), {}, {
     gender: gender || '',
     name: _objectSpread(_objectSpread({}, oldContactCleaned === null || oldContactCleaned === void 0 ? void 0 : oldContactCleaned.name), {}, {
       givenName: givenName || '',

package/transpiled/react/Contacts/AddModal/ContactForm/helpers.d.ts

@@ -13,7 +13,7 @@ export function createAddress({ address, oldContact, t }: {
     oldContact: any;
     t: any;
 }): any;
-export function getRelatedContactRelationships(relatedContact: (any | undefined)[]): Record<string, {
+export function getRelatedContactRelationships(relatedContact: (import('../types').RelatedContact | undefined)[]): Record<string, {
     data: {
         _id: string;
         _type: string;
@@ -21,7 +21,7 @@ export function getRelatedContactRelationships(relatedContact: (any | undefined)
 }>;
 export function removeRelatedContactRelationships(contact: import('cozy-client/types/types').IOCozyContact): import('cozy-client/types/types').IOCozyContact;
 export function removeAsscociatedData(contact: import('cozy-client/types/types').IOCozyContact): import('cozy-client/types/types').IOCozyContact;
-export function makeRelatedContact(contact: import('cozy-client/types/types').IOCozyContact): any[];
+export function makeRelatedContact(contact: import('cozy-client/types/types').IOCozyContact): import('../types').RelatedContact[];
 export function addField(fields: any): any;
 export function removeField(fields: any, index: any): void;
 export function makeCustomLabel(value: string, t: func): string;
@@ -32,3 +32,4 @@ export function makeImppValues(oldContact: import('cozy-client/types/types').IOC
     primary?: boolean;
 }[];
 export function makeInitialCustomValue(name: string, value: string): string;
+export function makeFields(customFields: (import('../types').Field)[] | undefined, defaultFields: (import('../types').Field)[]): (import('../types').Field)[];

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

@@ -103,7 +103,10 @@ export var createAddress = function createAddress(_ref) {
     var _oldContact$address, _contactToFormValues, _contactToFormValues$;
 
     var oldContactAddress = oldContact === null || oldContact === void 0 ? void 0 : (_oldContact$address = oldContact.address) === null || _oldContact$address === void 0 ? void 0 : _oldContact$address[index];
-    var oldContactFormValues = (_contactToFormValues = contactToFormValues(oldContact, t)) === null || _contactToFormValues === void 0 ? void 0 : (_contactToFormValues$ = _contactToFormValues.address) === null || _contactToFormValues$ === void 0 ? void 0 : _contactToFormValues$[index];
+    var oldContactFormValues = (_contactToFormValues = contactToFormValues({
+      contact: oldContact,
+      t: t
+    })) === null || _contactToFormValues === void 0 ? void 0 : (_contactToFormValues$ = _contactToFormValues.address) === null || _contactToFormValues$ === void 0 ? void 0 : _contactToFormValues$[index];
     var addressHasBeenModified = !isEqual(addressField, oldContactFormValues);
 
     if (addressHasBeenModified) {
@@ -139,7 +142,7 @@ export var createAddress = function createAddress(_ref) {
   }) : [];
 };
 /**
- * @param {(import('../../../types').RelatedContact|undefined)[]} relatedContact - The related contacts array
+ * @param {(import('../types').RelatedContact|undefined)[]} relatedContact - The related contacts array
  * @returns {Record<string, { data: { _id: string, _type: string }[] }>} - The related contacts relationships
  */
 
@@ -223,7 +226,7 @@ export var removeAsscociatedData = function removeAsscociatedData(contact) {
 };
 /**
  * @param {import('cozy-client/types/types').IOCozyContact} contact
- * @returns {import('../../../types').RelatedContact[]}
+ * @returns {import('../types').RelatedContact[]}
  */
 
 export var makeRelatedContact = function makeRelatedContact(contact) {
@@ -372,4 +375,24 @@ export var makeInitialCustomValue = function makeInitialCustomValue(name, value)
       label: valueObj.label
     });
   }
+};
+/**
+ * @param {(import('../types').Field)[]|undefined} customFields
+ * @param {(import('../types').Field)[]} defaultFields
+ * @returns {(import('../types').Field)[]}
+ */
+
+export var makeFields = function makeFields(customFields, defaultFields) {
+  if (!customFields) {
+    return defaultFields;
+  }
+
+  var fields = _toConsumableArray(defaultFields);
+
+  customFields.map(function (customField) {
+    if (customField.position) {
+      fields.splice(customField.position, 0, customField);
+    }
+  });
+  return fields;
 };

package/transpiled/react/Contacts/AddModal/ContactForm/index.d.ts

@@ -1,11 +1,17 @@
 export function getSubmitContactForm(): any;
 export function isSameContactProp(prevProps: any, nextProps: any): boolean;
-declare var _default: React.MemoExoticComponent<({ contact, onSubmit, contacts }: {
-    contact: import('cozy-client/types/types').IOCozyContact;
-    onSubmit: func;
-    contacts: {
-        data: Array<object>;
+declare var _default: React.MemoExoticComponent<{
+    ({ contacts, contact, customFieldsProps, onSubmit }: {
+        contacts: {
+            data: Array<object>;
+        };
+        contact: import('cozy-client/types/types').IOCozyContact;
+        customFieldsProps: Object;
+        onSubmit: func;
+    }): JSX.Element;
+    defaultProps: {
+        customFieldsProps: {};
     };
-}) => JSX.Element>;
+}>;
 export default _default;
 import React from "react";

package/transpiled/react/Contacts/AddModal/ContactForm/index.js

@@ -11,9 +11,9 @@ import { Form } from 'react-final-form';
 import { getHasManyItems } from 'cozy-client/dist/associations/HasMany';
 import FieldInputLayout from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/FieldInputLayout";
 import contactToFormValues from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/contactToFormValues";
-import { fields } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/fieldsConfig";
+import { fields as defaultFields } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/fieldsConfig";
 import formValuesToContact from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/formValuesToContact";
-import { validateFields } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/helpers";
+import { validateFields, makeFields } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/helpers";
 import { locales } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/locales";
 import Button from "cozy-ui/transpiled/react/Buttons";
 import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n"; // import { fullContactPropTypes } from '../../ContactPropTypes' // !!
@@ -34,16 +34,18 @@ export function getSubmitContactForm() {
 /**
  *
  * @param {object} params
+ * @param {{ data: Array<object> }} params.contacts
  * @param {import('cozy-client/types/types').IOCozyContact} params.contact
+ * @param {Object} params.customFieldsProps
  * @param {func} params.onSubmit
- * @param {{ data: Array<object> }} params.contacts
  * @returns
  */
 
 var ContactForm = function ContactForm(_ref) {
-  var contact = _ref.contact,
-      _onSubmit = _ref.onSubmit,
-      contacts = _ref.contacts;
+  var contacts = _ref.contacts,
+      contact = _ref.contact,
+      customFieldsProps = _ref.customFieldsProps,
+      _onSubmit = _ref.onSubmit;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -55,8 +57,23 @@ var ContactForm = function ContactForm(_ref) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
+  var fields = customFieldsProps.fields,
+      makeCustomFieldsFormValues = customFieldsProps.makeCustomFieldsFormValues,
+      makeCustomContactValues = customFieldsProps.makeCustomContactValues;
+
+  var _fields = makeFields(fields, defaultFields);
+
+  var hasSecondaryFields = _fields.some(function (el) {
+    return el.isSecondary;
+  });
+
   return /*#__PURE__*/React.createElement(Form, {
     mutators: _objectSpread({}, arrayMutators),
+    initialValues: contactToFormValues({
+      contact: contact,
+      makeCustomContactValues: makeCustomContactValues,
+      t: t
+    }),
     validate: function validate(values) {
       return validateFields(values, t);
     },
@@ -64,10 +81,10 @@ var ContactForm = function ContactForm(_ref) {
       return _onSubmit(formValuesToContact({
         formValues: formValues,
         oldContact: contact,
+        makeCustomFieldsFormValues: makeCustomFieldsFormValues,
         t: t
       }));
     },
-    initialValues: contactToFormValues(contact, t),
     render: function render(_ref2) {
       var handleSubmit = _ref2.handleSubmit,
           valid = _ref2.valid,
@@ -78,7 +95,7 @@ var ContactForm = function ContactForm(_ref) {
         role: "form",
         onSubmit: handleSubmit,
         className: "u-flex u-flex-column"
-      }, fields.map(function (attributes, index) {
+      }, _fields.map(function (attributes, index) {
         return /*#__PURE__*/React.createElement(FieldInputLayout, {
           key: index,
           attributes: attributes,
@@ -90,7 +107,7 @@ var ContactForm = function ContactForm(_ref) {
             errors: errors
           }
         });
-      }), !showSecondaryFields && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      }), hasSecondaryFields && !showSecondaryFields && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
         className: "u-db u-ml-2 u-mt-1",
         variant: "text",
         label: t('Contacts.AddModal.ContactForm.other-fields'),
@@ -100,10 +117,13 @@ var ContactForm = function ContactForm(_ref) {
       })));
     }
   });
+};
+
+ContactForm.defaultProps = {
+  customFieldsProps: {}
 }; // Used to avoid unnecessary multiple rendering of ContactForm when creating a new contact in another way.
 // These unnecessary renderings prevented the addition of a newly created linked contact. (Creation of a contact when selecting a linked contact)
 
-
 export var isSameContactProp = function isSameContactProp(prevProps, nextProps) {
   var _prevProps$contact, _nextProps$contact;
 

package/transpiled/react/Contacts/AddModal/index.d.ts

@@ -1,7 +1,8 @@
 export default AddModal;
-declare function AddModal({ contacts, contact, onSubmit, onClose }: {
+declare function AddModal({ contacts, contact, customFieldsProps, onSubmit, onClose }: {
     contacts: any;
     contact: any;
+    customFieldsProps: any;
     onSubmit: any;
     onClose: any;
 }): JSX.Element;

package/transpiled/react/Contacts/AddModal/index.js

@@ -12,6 +12,7 @@ import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n"
 var AddModal = function AddModal(_ref) {
   var contacts = _ref.contacts,
       contact = _ref.contact,
+      customFieldsProps = _ref.customFieldsProps,
       onSubmit = _ref.onSubmit,
       onClose = _ref.onClose;
   useExtendI18n(locales);
@@ -90,6 +91,7 @@ var AddModal = function AddModal(_ref) {
     content: /*#__PURE__*/React.createElement(ContactForm, {
       contacts: contacts,
       contact: selfContact,
+      customFieldsProps: customFieldsProps,
       onSubmit: handleFormSubmit
     }),
     actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {

package/transpiled/react/Contacts/AddModal/types.d.ts

@@ -1,3 +1,42 @@
+/**
+ * @typedef {'text'|'tel'|'email'|'button'|'url'|'date'} FieldType
+ */
+/**
+ * @typedef {Object} CustomLabelOptions
+ * @property {string} defaultType - The default type of the option
+ * @property {string} defaultLabel - The default label of the option
+ * @property {boolean} [hide] - Whether the radio choices is hidden
+ */
+/**
+ * @typedef {Object} LabelField
+ * @property {string} name - The name of the label field
+ * @property {boolean} select - Whether the field is a select
+ * @property {CustomLabelOptions} customLabelOptions - The custom label field options
+ * @property {Option[]} options - The options of the label field
+ */
+/**
+ * @typedef {Object} InputLabelProps
+ * @property {boolean} shrink - passed to InputLabelProps props
+ */
+/**
+ * @typedef {Object} Field
+ * @property {string} name - The name of the field
+ * @property {string|null} icon - The icon of the field
+ * @property {FieldType} type - The type of the field
+ * @property {boolean} [isSecondary] -  Whether the field is hidden from the main form
+ * @property {LabelField} [label] - Add a "label" field next to the main field
+ * @property {'accordion'|'array'} [layout] - Whether the field is an array (To add fields dynamically (e.g. email, address, etc.))
+ * @property {Field[]} [subFields] - The subfields of the field
+ * @property {InputLabelProps} [InputLabelProps] - The object passed to InputLabelProps props
+ * @property {boolean} [multiline] - Whether the field is multiline
+ * @property {number} [position] - Position of a field in the form. 1 is first.
+ */
+/**
+ * @typedef {Object} RelatedContact
+ * @property {string} relatedContactId - The id of the related contact
+ * @property {string} relatedContact - The displayName of the related contact
+ * @property {string} relatedContactLabel - Object with the type of the related contact stringified (e.g. '{\"type\":\"spouse\"}')
+ */
 export const labelPropTypes: PropTypes.Requireable<PropTypes.InferProps<{
     name: PropTypes.Requireable<string>;
     options: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -51,4 +90,99 @@ export namespace FieldInputWrapperPropTypes {
     }>>;
     export const fullWidth: PropTypes.Requireable<boolean>;
 }
+export type FieldType = 'text' | 'tel' | 'email' | 'button' | 'url' | 'date';
+export type CustomLabelOptions = {
+    /**
+     * - The default type of the option
+     */
+    defaultType: string;
+    /**
+     * - The default label of the option
+     */
+    defaultLabel: string;
+    /**
+     * - Whether the radio choices is hidden
+     */
+    hide?: boolean | undefined;
+};
+export type LabelField = {
+    /**
+     * - The name of the label field
+     */
+    name: string;
+    /**
+     * - Whether the field is a select
+     */
+    select: boolean;
+    /**
+     * - The custom label field options
+     */
+    customLabelOptions: CustomLabelOptions;
+    /**
+     * - The options of the label field
+     */
+    options: (new (text?: string | undefined, value?: string | undefined, defaultSelected?: boolean | undefined, selected?: boolean | undefined) => HTMLOptionElement)[];
+};
+export type InputLabelProps = {
+    /**
+     * - passed to InputLabelProps props
+     */
+    shrink: boolean;
+};
+export type Field = {
+    /**
+     * - The name of the field
+     */
+    name: string;
+    /**
+     * - The icon of the field
+     */
+    icon: string | null;
+    /**
+     * - The type of the field
+     */
+    type: FieldType;
+    /**
+     * -  Whether the field is hidden from the main form
+     */
+    isSecondary?: boolean | undefined;
+    /**
+     * - Add a "label" field next to the main field
+     */
+    label?: LabelField | undefined;
+    /**
+     * - Whether the field is an array (To add fields dynamically (e.g. email, address, etc.))
+     */
+    layout?: "array" | "accordion" | undefined;
+    /**
+     * - The subfields of the field
+     */
+    subFields?: Field[] | undefined;
+    /**
+     * - The object passed to InputLabelProps props
+     */
+    InputLabelProps?: InputLabelProps | undefined;
+    /**
+     * - Whether the field is multiline
+     */
+    multiline?: boolean | undefined;
+    /**
+     * - Position of a field in the form. 1 is first.
+     */
+    position?: number | undefined;
+};
+export type RelatedContact = {
+    /**
+     * - The id of the related contact
+     */
+    relatedContactId: string;
+    /**
+     * - The displayName of the related contact
+     */
+    relatedContact: string;
+    /**
+     * - Object with the type of the related contact stringified (e.g. '{\"type\":\"spouse\"}')
+     */
+    relatedContactLabel: string;
+};
 import PropTypes from "prop-types";

package/transpiled/react/Contacts/AddModal/types.js

@@ -1,5 +1,50 @@
 import PropTypes from 'prop-types';
 import { iconPropType } from "cozy-ui/transpiled/react/Icon";
+/**
+ * @typedef {'text'|'tel'|'email'|'button'|'url'|'date'} FieldType
+ */
+
+/**
+ * @typedef {Object} CustomLabelOptions
+ * @property {string} defaultType - The default type of the option
+ * @property {string} defaultLabel - The default label of the option
+ * @property {boolean} [hide] - Whether the radio choices is hidden
+ */
+
+/**
+ * @typedef {Object} LabelField
+ * @property {string} name - The name of the label field
+ * @property {boolean} select - Whether the field is a select
+ * @property {CustomLabelOptions} customLabelOptions - The custom label field options
+ * @property {Option[]} options - The options of the label field
+ */
+
+/**
+ * @typedef {Object} InputLabelProps
+ * @property {boolean} shrink - passed to InputLabelProps props
+ */
+
+/**
+ * @typedef {Object} Field
+ * @property {string} name - The name of the field
+ * @property {string|null} icon - The icon of the field
+ * @property {FieldType} type - The type of the field
+ * @property {boolean} [isSecondary] -  Whether the field is hidden from the main form
+ * @property {LabelField} [label] - Add a "label" field next to the main field
+ * @property {'accordion'|'array'} [layout] - Whether the field is an array (To add fields dynamically (e.g. email, address, etc.))
+ * @property {Field[]} [subFields] - The subfields of the field
+ * @property {InputLabelProps} [InputLabelProps] - The object passed to InputLabelProps props
+ * @property {boolean} [multiline] - Whether the field is multiline
+ * @property {number} [position] - Position of a field in the form. 1 is first.
+ */
+
+/**
+ * @typedef {Object} RelatedContact
+ * @property {string} relatedContactId - The id of the related contact
+ * @property {string} relatedContact - The displayName of the related contact
+ * @property {string} relatedContactLabel - Object with the type of the related contact stringified (e.g. '{\"type\":\"spouse\"}')
+ */
+
 export var labelPropTypes = PropTypes.shape({
   name: PropTypes.string,
   options: PropTypes.arrayOf(PropTypes.shape({