cozy-ui-plus 5.1.1 → 5.2.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.2.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@5.1.1...cozy-ui-plus@5.2.0) (2026-03-09)
+
+### Bug Fixes
+
+- **cozy-ui-plus:** Remove useless name on label field in ContactForm ([6769cf4](https://github.com/cozy/cozy-libs/commit/6769cf451d4388ea4db07ef34dce5ee9e4168253))
+
+### Features
+
+- **cozy-ui-plus:** Add disable on ContactForm field ([56a0000](https://github.com/cozy/cozy-libs/commit/56a0000f0b457aa12c5d3725e67197c61e774e7b))
+- **cozy-ui-plus:** Spread Contact in ContactForm ([e0f5279](https://github.com/cozy/cozy-libs/commit/e0f52797e922daffbd1264af454d093b75f6baf0))
+
 ## [5.1.1](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@5.1.0...cozy-ui-plus@5.1.1) (2026-03-05)
 
 **Note:** Version bump only for package cozy-ui-plus

package/dist/Contacts/AddModal/ContactForm/FieldInput.js

@@ -53,6 +53,7 @@ var FieldInput = function FieldInput(_ref) {
       subFields = _ref$attributes.subFields,
       restAttributes = (0, _objectWithoutProperties2.default)(_ref$attributes, _excluded),
       contacts = _ref.contacts,
+      contact = _ref.contact,
       error = _ref.error,
       helperText = _ref.helperText,
       label = _ref.label,
@@ -109,6 +110,7 @@ var FieldInput = function FieldInput(_ref) {
     id: id,
     attributes: restAttributes,
     name: name,
+    contact: contact,
     component: _FieldInputWrapper.default,
     onFocus: onFocus,
     onClick: handleClick
@@ -133,6 +135,7 @@ var FieldInput = function FieldInput(_ref) {
     attributes: labelProps,
     name: "".concat(name, "Label"),
     label: t('Contacts.AddModal.ContactForm.fields.label'),
+    contact: contact,
     component: _FieldInputWrapper.default,
     onFocus: onFocus
   }))));
@@ -149,6 +152,7 @@ FieldInput.propTypes = {
   contacts: _propTypes.default.shape({
     data: _propTypes.default.arrayOf(_propTypes.default.object)
   }),
+  contact: _propTypes.default.object,
   // Destructuring props
   id: _propTypes.default.string,
   label: _propTypes.default.string

package/dist/Contacts/AddModal/ContactForm/FieldInputAccordion.js

@@ -41,6 +41,7 @@ var FieldInputAccordion = function FieldInputAccordion(_ref) {
       subFields = _ref$attributes.subFields,
       restAttributes = (0, _objectWithoutProperties2.default)(_ref$attributes, _excluded),
       contacts = _ref.contacts,
+      contact = _ref.contact,
       error = _ref.error,
       helperText = _ref.helperText;
   (0, _twakeI18n.useExtendI18n)(_locales.locales);
@@ -58,6 +59,7 @@ var FieldInputAccordion = function FieldInputAccordion(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_FieldInput.default, {
     attributes: restAttributes,
     contacts: contacts,
+    contact: contact,
     error: error,
     helperText: helperText,
     name: name,

package/dist/Contacts/AddModal/ContactForm/FieldInputArray.js

@@ -43,6 +43,7 @@ var FieldInputArray = function FieldInputArray(_ref) {
       label = _ref$attributes.label,
       restAttributes = (0, _objectWithoutProperties2.default)(_ref$attributes, _excluded),
       contacts = _ref.contacts,
+      contact = _ref.contact,
       formProps = _ref.formProps;
   (0, _twakeI18n.useExtendI18n)(_locales.locales);
 
@@ -50,16 +51,20 @@ var FieldInputArray = function FieldInputArray(_ref) {
       t = _useI18n.t;
 
   var errors = formProps.errors;
+  var disabled = restAttributes.disabled,
+      isDisabled = restAttributes.isDisabled;
   return /*#__PURE__*/_react.default.createElement(_reactFinalFormArrays.FieldArray, {
     name: name
   }, function (_ref2) {
     var fields = _ref2.fields;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fields.map(function (nameWithIndex, index) {
-      var _fields$value$index, _fields$value$index2;
-
-      var key = ((_fields$value$index = fields.value[index]) === null || _fields$value$index === void 0 ? void 0 : _fields$value$index.fieldId) || nameWithIndex;
-      var showRemove = (_fields$value$index2 = fields.value[index]) === null || _fields$value$index2 === void 0 ? void 0 : _fields$value$index2[name];
+      var field = fields.value[index];
+      var key = (field === null || field === void 0 ? void 0 : field.fieldId) || nameWithIndex;
       var inputName = "".concat(nameWithIndex, ".").concat(name);
+
+      var _disabled = disabled || (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(inputName, contact));
+
+      var showRemove = (field === null || field === void 0 ? void 0 : field[name]) && !_disabled;
       var isError = (0, _helpers.makeIsRequiredError)(restAttributes.required, formProps);
       return /*#__PURE__*/_react.default.createElement("div", {
         key: key,
@@ -69,6 +74,7 @@ var FieldInputArray = function FieldInputArray(_ref) {
       }, /*#__PURE__*/_react.default.createElement(_FieldInput.default, {
         attributes: restAttributes,
         contacts: contacts,
+        contact: contact,
         error: isError,
         helperText: isError ? errors[inputName] : null,
         name: inputName,

package/dist/Contacts/AddModal/ContactForm/FieldInputLayout.js

@@ -29,17 +29,12 @@ var _helpers = require("./helpers");
 
 var _locales = require("./locales");
 
-var _excluded = ["layout", "icon", "isSecondary", "validate"],
-    _excluded2 = ["name", "label"];
+var _excluded = ["name", "label", "layout", "icon", "isSecondary"];
 
 var FieldInputLayout = function FieldInputLayout(_ref) {
-  var _ref$attributes = _ref.attributes,
-      layout = _ref$attributes.layout,
-      icon = _ref$attributes.icon,
-      isSecondary = _ref$attributes.isSecondary,
-      validate = _ref$attributes.validate,
-      attributes = (0, _objectWithoutProperties2.default)(_ref$attributes, _excluded),
+  var attributes = _ref.attributes,
       contacts = _ref.contacts,
+      contact = _ref.contact,
       showSecondaryFields = _ref.showSecondaryFields,
       formProps = _ref.formProps;
   (0, _twakeI18n.useExtendI18n)(_locales.locales);
@@ -50,7 +45,10 @@ var FieldInputLayout = function FieldInputLayout(_ref) {
   var errors = formProps.errors;
   var name = attributes.name,
       label = attributes.label,
-      restAttributes = (0, _objectWithoutProperties2.default)(attributes, _excluded2);
+      layout = attributes.layout,
+      icon = attributes.icon,
+      isSecondary = attributes.isSecondary,
+      restAttributes = (0, _objectWithoutProperties2.default)(attributes, _excluded);
   var isError = (0, _helpers.makeIsRequiredError)(restAttributes.required, formProps);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('u-mt-1', {
@@ -69,15 +67,18 @@ var FieldInputLayout = function FieldInputLayout(_ref) {
   }, layout === 'array' ? /*#__PURE__*/_react.default.createElement(_FieldInputArray.default, {
     attributes: attributes,
     contacts: contacts,
+    contact: contact,
     formProps: formProps
   }) : layout === 'accordion' ? /*#__PURE__*/_react.default.createElement(_FieldInputAccordion.default, {
     attributes: attributes,
     contacts: contacts,
+    contact: contact,
     error: isError,
     helperText: isError ? errors[name] : null
   }) : /*#__PURE__*/_react.default.createElement(_FieldInput.default, {
     attributes: restAttributes,
     contacts: contacts,
+    contact: contact,
     error: isError,
     helperText: isError ? errors[name] : null,
     name: name,
@@ -91,6 +92,7 @@ FieldInputLayout.propTypes = {
   contacts: _propTypes.default.shape({
     data: _propTypes.default.arrayOf(_propTypes.default.object)
   }),
+  contact: _propTypes.default.object,
   formProps: _propTypes.default.object
 };
 var _default = FieldInputLayout;

package/dist/Contacts/AddModal/ContactForm/FieldInputWrapper.js

@@ -21,7 +21,7 @@ var _TextFieldSelect = _interopRequireDefault(require("./TextFieldSelect"));
 
 var _types = require("../types");
 
-var _excluded = ["component"],
+var _excluded = ["component", "layout", "icon", "isSecondary", "validate"],
     _excluded2 = ["input", "attributes", "variant", "fullWidth"];
 
 // component used to flatten props to ensure compatibility
@@ -30,6 +30,10 @@ var FieldInputWrapper = function FieldInputWrapper(_ref) {
   var input = _ref.input,
       _ref$attributes = _ref.attributes,
       component = _ref$attributes.component,
+      layout = _ref$attributes.layout,
+      icon = _ref$attributes.icon,
+      isSecondary = _ref$attributes.isSecondary,
+      validate = _ref$attributes.validate,
       restAttributes = (0, _objectWithoutProperties2.default)(_ref$attributes, _excluded),
       variant = _ref.variant,
       fullWidth = _ref.fullWidth,

package/dist/Contacts/AddModal/ContactForm/TextFieldCustomLabelSelect.js

@@ -27,7 +27,7 @@ var _CustomLabelDialog = _interopRequireDefault(require("../CustomLabelDialog"))
 
 var _types = require("../types");
 
-var _excluded = ["name", "value", "options", "customLabelOptions", "onChange"];
+var _excluded = ["name", "value", "options", "disabled", "isDisabled", "contact", "customLabelOptions", "onChange"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -37,6 +37,9 @@ var TextFieldCustomLabelSelect = function TextFieldCustomLabelSelect(_ref) {
   var name = _ref.name,
       value = _ref.value,
       options = _ref.options,
+      disabled = _ref.disabled,
+      isDisabled = _ref.isDisabled,
+      contact = _ref.contact,
       customLabelOptions = _ref.customLabelOptions,
       _onChange = _ref.onChange,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -77,10 +80,13 @@ var TextFieldCustomLabelSelect = function TextFieldCustomLabelSelect(_ref) {
 
   var _options = options.concat(customOption);
 
+  var _disabled = disabled || (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(name, contact));
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TextFieldSelect.default, (0, _extends2.default)({}, props, {
     name: name,
     value: value,
     options: _options,
+    disabled: _disabled,
     onChange: function onChange(ev) {
       if (ev.target.value === 'skip') {
         return;

package/dist/Contacts/AddModal/ContactForm/TextFieldPhone/index.js

@@ -23,12 +23,18 @@ var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
 
 var _FlagBottomSheet = _interopRequireDefault(require("./FlagBottomSheet"));
 
+var _FlagImage = _interopRequireDefault(require("./FlagImage"));
+
 var _FlagMenu = _interopRequireDefault(require("./FlagMenu"));
 
-var _excluded = ["value", "onChange"];
+var _excluded = ["name", "value", "disabled", "isDisabled", "contact", "onChange"];
 
 var TextFieldPhone = function TextFieldPhone(_ref) {
-  var value = _ref.value,
+  var name = _ref.name,
+      value = _ref.value,
+      disabled = _ref.disabled,
+      isDisabled = _ref.isDisabled,
+      contact = _ref.contact,
       _onChange = _ref.onChange,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
@@ -50,13 +56,21 @@ var TextFieldPhone = function TextFieldPhone(_ref) {
       setCountry = _usePhoneInput.setCountry;
 
   var ResponsiveFlagMenu = isMobile ? _FlagBottomSheet.default : _FlagMenu.default;
+
+  var _disabled = disabled || (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(name, contact));
+
   return /*#__PURE__*/_react.default.createElement(_TextField.default, (0, _extends2.default)({
+    name: name,
     value: inputValue,
     inputRef: inputRef,
+    disabled: _disabled,
     InputProps: {
       startAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
         position: "start"
-      }, /*#__PURE__*/_react.default.createElement(ResponsiveFlagMenu, {
+      }, _disabled ? /*#__PURE__*/_react.default.createElement(_FlagImage.default, {
+        className: "u-ml-half",
+        iso2: country.iso2
+      }) : /*#__PURE__*/_react.default.createElement(ResponsiveFlagMenu, {
         value: country.iso2,
         setCountry: setCountry
       }))

package/dist/Contacts/AddModal/ContactForm/fieldsConfig.js

@@ -86,7 +86,6 @@ var fields = [{
   layout: 'array',
   component: _index.default,
   label: {
-    name: 'phoneLabel',
     select: true,
     customLabelOptions: {
       defaultType: '',
@@ -121,7 +120,6 @@ var fields = [{
   type: 'email',
   layout: 'array',
   label: {
-    name: 'emailLabel',
     select: true,
     customLabelOptions: {
       defaultType: '',
@@ -200,7 +198,6 @@ var fields = [{
     type: 'text'
   }],
   label: {
-    name: 'addressLabel',
     select: true,
     customLabelOptions: {
       defaultType: '',
@@ -228,7 +225,6 @@ var fields = [{
   type: 'url',
   isSecondary: true,
   label: {
-    name: 'cozyLabel',
     select: true,
     customLabelOptions: {
       defaultType: '',
@@ -273,7 +269,6 @@ var fields = [{
     }))
   },
   label: {
-    name: 'relatedContactLabel',
     select: true,
     options: [{
       value: '',

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

@@ -165,6 +165,14 @@ var hasExtendedAddress = function hasExtendedAddress(addressField) {
     return extendedAddressKeys.includes(ext);
   });
 };
+/**
+ * Items matching the given predicate function `shouldBeHead`
+ * are moved to the start of the array, preserving the order of the others.
+ *
+ * @param {Function} shouldBeHead - A predicate function that takes an item and returns true if it should be moved to the head of the array.
+ * @returns {Function} A function that takes an array of items and returns a new array with the matching item(s) moved to the front.
+ */
+
 
 exports.hasExtendedAddress = hasExtendedAddress;
 
@@ -175,6 +183,14 @@ var moveToHead = function moveToHead(shouldBeHead) {
     }, []);
   };
 };
+/**
+ * Moves items with the `primary` property set to true to the head of the array.
+ *
+ * @function
+ * @param {Array<Object>} items - The input array of items, each item optionally having a `primary` property.
+ * @returns {Array<Object>} The reordered array with 'primary' items at the front.
+ */
+
 
 exports.moveToHead = moveToHead;
 var movePrimaryToHead = moveToHead(function (v) {

package/dist/Contacts/AddModal/ContactForm/index.js

@@ -63,6 +63,7 @@ function getSubmitContactForm() {
  *
  * @param {object} params
  * @param {{ data: Array<object> }} params.contacts
+ * @param {object} params.contact
  * @param {import('cozy-client/types/types').IOCozyContact} params.contact
  * @param {Object} params.customFieldsProps
  * @param {func} params.onSubmit
@@ -135,6 +136,7 @@ var ContactForm = function ContactForm(_ref) {
           key: index,
           attributes: attributes,
           contacts: contacts,
+          contact: contact,
           showSecondaryFields: showSecondaryFields,
           formProps: {
             valid: valid,

package/dist/Contacts/AddModal/types.js

@@ -100,6 +100,7 @@ var FieldInputWrapperPropTypes = {
   label: _propTypes.default.string,
   required: _propTypes.default.bool,
   variant: _propTypes.default.string,
+  contact: _propTypes.default.object,
   customLabelOptions: _propTypes.default.shape({
     hide: _propTypes.default.bool,
     defaultType: _propTypes.default.string.isRequired,

package/dist/src/Contacts/AddModal/ContactForm/FieldInput.d.ts

@@ -1,5 +1,5 @@
 export default FieldInput;
-declare function FieldInput({ name, labelProps, className, attributes: { subFields, ...restAttributes }, contacts, error, helperText, label, isInvisible }: {
+declare function FieldInput({ name, labelProps, className, attributes: { subFields, ...restAttributes }, contacts, contact, error, helperText, label, isInvisible }: {
     name: any;
     labelProps: any;
     className: any;
@@ -8,6 +8,7 @@ declare function FieldInput({ name, labelProps, className, attributes: { subFiel
         subFields: any;
     };
     contacts: any;
+    contact: any;
     error: any;
     helperText: any;
     label: any;
@@ -23,6 +24,7 @@ declare namespace FieldInput {
         export let contacts: PropTypes.Requireable<PropTypes.InferProps<{
             data: PropTypes.Requireable<object[]>;
         }>>;
+        export let contact: PropTypes.Requireable<object>;
         export let id: PropTypes.Requireable<string>;
         export let label: PropTypes.Requireable<string>;
     }

package/dist/src/Contacts/AddModal/ContactForm/FieldInputAccordion.d.ts

@@ -1,5 +1,5 @@
 export default FieldInputAccordion;
-declare function FieldInputAccordion({ attributes: { name, label, subFields, ...restAttributes }, contacts, error, helperText }: {
+declare function FieldInputAccordion({ attributes: { name, label, subFields, ...restAttributes }, contacts, contact, error, helperText }: {
     attributes: {
         [x: string]: any;
         name: any;
@@ -7,6 +7,7 @@ declare function FieldInputAccordion({ attributes: { name, label, subFields, ...
         subFields: any;
     };
     contacts: any;
+    contact: any;
     error: any;
     helperText: any;
 }): JSX.Element;

package/dist/src/Contacts/AddModal/ContactForm/FieldInputArray.d.ts

@@ -1,10 +1,11 @@
 export default FieldInputArray;
-declare function FieldInputArray({ attributes: { name, label, ...restAttributes }, contacts, formProps }: {
+declare function FieldInputArray({ attributes: { name, label, ...restAttributes }, contacts, contact, formProps }: {
     attributes: {
         [x: string]: any;
         name: any;
         label: any;
     };
     contacts: any;
+    contact: any;
     formProps: any;
 }): JSX.Element;

package/dist/src/Contacts/AddModal/ContactForm/FieldInputLayout.d.ts

@@ -1,13 +1,8 @@
 export default FieldInputLayout;
-declare function FieldInputLayout({ attributes: { layout, icon, isSecondary, validate, ...attributes }, contacts, showSecondaryFields, formProps }: {
-    attributes: {
-        [x: string]: any;
-        layout: any;
-        icon: any;
-        isSecondary: any;
-        validate: any;
-    };
+declare function FieldInputLayout({ attributes, contacts, contact, showSecondaryFields, formProps }: {
+    attributes: any;
     contacts: any;
+    contact: any;
     showSecondaryFields: any;
     formProps: any;
 }): JSX.Element;
@@ -17,6 +12,7 @@ declare namespace FieldInputLayout {
         let contacts: PropTypes.Requireable<PropTypes.InferProps<{
             data: PropTypes.Requireable<object[]>;
         }>>;
+        let contact: PropTypes.Requireable<object>;
         let formProps: PropTypes.Requireable<object>;
     }
 }

package/dist/src/Contacts/AddModal/ContactForm/FieldInputWrapper.d.ts

@@ -1,10 +1,14 @@
 export default FieldInputWrapper;
-declare function FieldInputWrapper({ input, attributes: { component, ...restAttributes }, variant, fullWidth, ...props }: {
+declare function FieldInputWrapper({ input, attributes: { component, layout, icon, isSecondary, validate, ...restAttributes }, variant, fullWidth, ...props }: {
     [x: string]: any;
     input: any;
     attributes: {
         [x: string]: any;
         component: any;
+        layout: any;
+        icon: any;
+        isSecondary: any;
+        validate: any;
     };
     variant: any;
     fullWidth: any;

package/dist/src/Contacts/AddModal/ContactForm/TextFieldCustomLabelSelect.d.ts

@@ -1,9 +1,12 @@
 export default TextFieldCustomLabelSelect;
-declare function TextFieldCustomLabelSelect({ name, value, options, customLabelOptions, onChange, ...props }: {
+declare function TextFieldCustomLabelSelect({ name, value, options, disabled, isDisabled, contact, customLabelOptions, onChange, ...props }: {
     [x: string]: any;
     name: any;
     value: any;
     options: any;
+    disabled: any;
+    isDisabled: any;
+    contact: any;
     customLabelOptions: any;
     onChange: any;
 }): JSX.Element;

package/dist/src/Contacts/AddModal/ContactForm/TextFieldPhone/index.d.ts

@@ -1,6 +1,10 @@
 export default TextFieldPhone;
-declare function TextFieldPhone({ value, onChange, ...props }: {
+declare function TextFieldPhone({ name, value, disabled, isDisabled, contact, onChange, ...props }: {
     [x: string]: any;
+    name: any;
     value: any;
+    disabled: any;
+    isDisabled: any;
+    contact: any;
     onChange: any;
 }): JSX.Element;

package/dist/src/Contacts/AddModal/ContactForm/helpers.d.ts

@@ -8,8 +8,15 @@ export function makeTypeAndLabel(itemLabel?: string): {
     label?: string;
 };
 export function hasExtendedAddress(addressField: object): boolean;
-export function moveToHead(shouldBeHead: any): (items: any) => any;
-export function movePrimaryToHead(items: any): any;
+export function moveToHead(shouldBeHead: Function): Function;
+/**
+ * Moves items with the `primary` property set to true to the head of the array.
+ *
+ * @function
+ * @param {Array<Object>} items - The input array of items, each item optionally having a `primary` property.
+ * @returns {Array<Object>} The reordered array with 'primary' items at the front.
+ */
+export const movePrimaryToHead: Function;
 export function createAddress({ address, oldContact, t }: {
     address: any;
     oldContact: any;

package/dist/src/Contacts/AddModal/ContactForm/index.d.ts

@@ -5,7 +5,8 @@ declare const _default: React.MemoExoticComponent<{
         contacts: {
             data: Array<object>;
         };
-        contact: import("cozy-client/types/types").IOCozyContact;
+        contact: object;
+        contact: any;
         customFieldsProps: any;
         onSubmit: func;
     }): JSX.Element;

package/dist/src/Contacts/AddModal/types.d.ts

@@ -83,6 +83,7 @@ export namespace FieldInputWrapperPropTypes {
     export let label: PropTypes.Requireable<string>;
     export let required: PropTypes.Requireable<boolean>;
     export let variant: PropTypes.Requireable<string>;
+    export let contact: PropTypes.Requireable<object>;
     export let customLabelOptions: PropTypes.Requireable<PropTypes.InferProps<{
         hide: PropTypes.Requireable<boolean>;
         defaultType: PropTypes.Validator<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui-plus",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "description": "Cozy-ui-plus is an extension of cozy-ui and provides components based on cozy-client",
   "main": "dist/index.js",
   "license": "MIT",
@@ -73,5 +73,5 @@
     "react-dom": "^16 || ^17 || ^18",
     "twake-i18n": ">=0.3.0"
   },
-  "gitHead": "46d6951cb22a17ac26c3b00c28caf47d405d6683"
+  "gitHead": "44e6a2a8eed748de2328226d11b2d0b9db102f12"
 }

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

@@ -19,6 +19,7 @@ const FieldInput = ({
   className,
   attributes: { subFields, ...restAttributes },
   contacts,
+  contact,
   error,
   helperText,
   label,
@@ -62,6 +63,7 @@ const FieldInput = ({
         id={id}
         attributes={restAttributes}
         name={name}
+        contact={contact}
         component={FieldInputWrapper}
         onFocus={onFocus}
         onClick={handleClick}
@@ -87,6 +89,7 @@ const FieldInput = ({
               attributes={labelProps}
               name={`${name}Label`}
               label={t('Contacts.AddModal.ContactForm.fields.label')}
+              contact={contact}
               component={FieldInputWrapper}
               onFocus={onFocus}
             />
@@ -107,6 +110,7 @@ FieldInput.propTypes = {
   contacts: PropTypes.shape({
     data: PropTypes.arrayOf(PropTypes.object)
   }),
+  contact: PropTypes.object,
   // Destructuring props
   id: PropTypes.string,
   label: PropTypes.string

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

@@ -12,6 +12,7 @@ import { locales } from './locales'
 const FieldInputAccordion = ({
   attributes: { name, label, subFields, ...restAttributes },
   contacts,
+  contact,
   error,
   helperText
 }) => {
@@ -25,6 +26,7 @@ const FieldInputAccordion = ({
         <FieldInput
           attributes={restAttributes}
           contacts={contacts}
+          contact={contact}
           error={error}
           helperText={helperText}
           name={name}

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

@@ -17,11 +17,13 @@ import { locales } from './locales'
 const FieldInputArray = ({
   attributes: { name, label, ...restAttributes },
   contacts,
+  contact,
   formProps
 }) => {
   useExtendI18n(locales)
   const { t } = useI18n()
   const { errors } = formProps
+  const { disabled, isDisabled } = restAttributes
 
   return (
     <FieldArray name={name}>
@@ -29,9 +31,11 @@ const FieldInputArray = ({
         return (
           <>
             {fields.map((nameWithIndex, index) => {
-              const key = fields.value[index]?.fieldId || nameWithIndex
-              const showRemove = fields.value[index]?.[name]
+              const field = fields.value[index]
+              const key = field?.fieldId || nameWithIndex
               const inputName = `${nameWithIndex}.${name}`
+              const _disabled = disabled || isDisabled?.(inputName, contact)
+              const showRemove = field?.[name] && !_disabled
               const isError = makeIsRequiredError(
                 restAttributes.required,
                 formProps
@@ -47,6 +51,7 @@ const FieldInputArray = ({
                   <FieldInput
                     attributes={restAttributes}
                     contacts={contacts}
+                    contact={contact}
                     error={isError}
                     helperText={isError ? errors[inputName] : null}
                     name={inputName}

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

@@ -12,16 +12,17 @@ import { makeIsRequiredError } from './helpers'
 import { locales } from './locales'
 
 const FieldInputLayout = ({
-  // eslint-disable-next-line no-unused-vars
-  attributes: { layout, icon, isSecondary, validate, ...attributes }, // ⚠️ `layout` `icon` `isSecondary` `validate` here are removed from attributes to avoid DOM propagration
+  attributes,
   contacts,
+  contact,
   showSecondaryFields,
   formProps
 }) => {
   useExtendI18n(locales)
   const { t } = useI18n()
   const { errors } = formProps
-  const { name, label, ...restAttributes } = attributes
+  const { name, label, layout, icon, isSecondary, ...restAttributes } =
+    attributes
 
   const isError = makeIsRequiredError(restAttributes.required, formProps)
 
@@ -42,12 +43,14 @@ const FieldInputLayout = ({
           <FieldInputArray
             attributes={attributes}
             contacts={contacts}
+            contact={contact}
             formProps={formProps}
           />
         ) : layout === 'accordion' ? (
           <FieldInputAccordion
             attributes={attributes}
             contacts={contacts}
+            contact={contact}
             error={isError}
             helperText={isError ? errors[name] : null}
           />
@@ -55,6 +58,7 @@ const FieldInputLayout = ({
           <FieldInput
             attributes={restAttributes}
             contacts={contacts}
+            contact={contact}
             error={isError}
             helperText={isError ? errors[name] : null}
             name={name}
@@ -72,6 +76,7 @@ FieldInputLayout.propTypes = {
   contacts: PropTypes.shape({
     data: PropTypes.arrayOf(PropTypes.object)
   }),
+  contact: PropTypes.object,
   formProps: PropTypes.object
 }
 

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

@@ -10,7 +10,14 @@ import { FieldInputWrapperPropTypes } from '../types'
 // between Field from react-final-form and TextField from Mui
 const FieldInputWrapper = ({
   input,
-  attributes: { component, ...restAttributes },
+  attributes: {
+    component,
+    layout, // eslint-disable-line no-unused-vars
+    icon, // eslint-disable-line no-unused-vars
+    isSecondary, // eslint-disable-line no-unused-vars
+    validate, // eslint-disable-line no-unused-vars
+    ...restAttributes
+  }, // ⚠️ `layout` `icon` `isSecondary` `validate` are removed from attributes to avoid DOM propagration, only used for business rules
   variant,
   fullWidth,
   ...props

package/src/Contacts/AddModal/ContactForm/TextFieldCustomLabelSelect.jsx

@@ -11,6 +11,9 @@ const TextFieldCustomLabelSelect = ({
   name,
   value,
   options,
+  disabled,
+  isDisabled,
+  contact,
   customLabelOptions,
   onChange,
   ...props
@@ -44,6 +47,7 @@ const TextFieldCustomLabelSelect = ({
         }
       ]
   const _options = options.concat(customOption)
+  const _disabled = disabled || isDisabled?.(name, contact)
 
   return (
     <>
@@ -52,6 +56,7 @@ const TextFieldCustomLabelSelect = ({
         name={name}
         value={value}
         options={_options}
+        disabled={_disabled}
         onChange={ev => {
           if (ev.target.value === 'skip') {
             return

package/src/Contacts/AddModal/ContactForm/TextFieldPhone/index.jsx

@@ -6,10 +6,20 @@ import TextField from 'cozy-ui/transpiled/react/TextField'
 import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 import FlagBottomSheet from './FlagBottomSheet'
+import FlagImage from './FlagImage'
 import FlagMenu from './FlagMenu'
 
-const TextFieldPhone = ({ value, onChange, ...props }) => {
+const TextFieldPhone = ({
+  name,
+  value,
+  disabled,
+  isDisabled,
+  contact,
+  onChange,
+  ...props
+}) => {
   const { isMobile } = useBreakpoints()
+
   const { inputValue, handlePhoneValueChange, inputRef, country, setCountry } =
     usePhoneInput({
       defaultCountry: 'fr',
@@ -21,15 +31,25 @@ const TextFieldPhone = ({ value, onChange, ...props }) => {
     })
 
   const ResponsiveFlagMenu = isMobile ? FlagBottomSheet : FlagMenu
+  const _disabled = disabled || isDisabled?.(name, contact)
 
   return (
     <TextField
+      name={name}
       value={inputValue}
       inputRef={inputRef}
+      disabled={_disabled}
       InputProps={{
         startAdornment: (
           <InputAdornment position="start">
-            <ResponsiveFlagMenu value={country.iso2} setCountry={setCountry} />
+            {_disabled ? (
+              <FlagImage className="u-ml-half" iso2={country.iso2} />
+            ) : (
+              <ResponsiveFlagMenu
+                value={country.iso2}
+                setCountry={setCountry}
+              />
+            )}
           </InputAdornment>
         )
       }}

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

@@ -78,7 +78,6 @@ export const fields = [
     layout: 'array',
     component: TextFieldPhone,
     label: {
-      name: 'phoneLabel',
       select: true,
       customLabelOptions: {
         defaultType: '',
@@ -122,7 +121,6 @@ export const fields = [
     type: 'email',
     layout: 'array',
     label: {
-      name: 'emailLabel',
       select: true,
       customLabelOptions: {
         defaultType: '',
@@ -220,7 +218,6 @@ export const fields = [
       }
     ],
     label: {
-      name: 'addressLabel',
       select: true,
       customLabelOptions: {
         defaultType: '',
@@ -254,7 +251,6 @@ export const fields = [
     type: 'url',
     isSecondary: true,
     label: {
-      name: 'cozyLabel',
       select: true,
       customLabelOptions: {
         defaultType: '',
@@ -303,7 +299,6 @@ export const fields = [
       )
     },
     label: {
-      name: 'relatedContactLabel',
       select: true,
       options: [
         {

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

@@ -134,9 +134,23 @@ export const hasExtendedAddress = addressField => {
   )
 }
 
+/**
+ * Items matching the given predicate function `shouldBeHead`
+ * are moved to the start of the array, preserving the order of the others.
+ *
+ * @param {Function} shouldBeHead - A predicate function that takes an item and returns true if it should be moved to the head of the array.
+ * @returns {Function} A function that takes an array of items and returns a new array with the matching item(s) moved to the front.
+ */
 export const moveToHead = shouldBeHead => items =>
   items.reduce((arr, v) => (shouldBeHead(v) ? [v, ...arr] : [...arr, v]), [])
 
+/**
+ * Moves items with the `primary` property set to true to the head of the array.
+ *
+ * @function
+ * @param {Array<Object>} items - The input array of items, each item optionally having a `primary` property.
+ * @returns {Array<Object>} The reordered array with 'primary' items at the front.
+ */
 export const movePrimaryToHead = moveToHead(v => v?.primary)
 
 export const createAddress = ({ address, oldContact, t }) => {

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

@@ -37,6 +37,7 @@ export function getSubmitContactForm() {
  *
  * @param {object} params
  * @param {{ data: Array<object> }} params.contacts
+ * @param {object} params.contact
  * @param {import('cozy-client/types/types').IOCozyContact} params.contact
  * @param {Object} params.customFieldsProps
  * @param {func} params.onSubmit
@@ -94,6 +95,7 @@ const ContactForm = ({ contacts, contact, customFieldsProps, onSubmit }) => {
                 key={index}
                 attributes={attributes}
                 contacts={contacts}
+                contact={contact}
                 showSecondaryFields={showSecondaryFields}
                 formProps={{
                   valid,

package/src/Contacts/AddModal/types.js

@@ -93,6 +93,7 @@ export const FieldInputWrapperPropTypes = {
   label: PropTypes.string,
   required: PropTypes.bool,
   variant: PropTypes.string,
+  contact: PropTypes.object,
   customLabelOptions: PropTypes.shape({
     hide: PropTypes.bool,
     defaultType: PropTypes.string.isRequired,