cozy-ui-plus 3.1.2 → 4.1.0

package/dist/Paywall/Paywall.js

@@ -19,6 +19,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _twakeI18n = require("twake-i18n");
+
 var _cozyClient = require("cozy-client");
 
 var _instance = require("cozy-client/dist/models/instance");
@@ -41,8 +43,6 @@ var _Spinner = _interopRequireDefault(require("cozy-ui/transpiled/react/Spinner"
 
 var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
 
-var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
-
 var _helpers = require("./helpers");
 
 var _withPaywallLocales = _interopRequireDefault(require("./locales/withPaywallLocales"));
@@ -66,7 +66,7 @@ var Paywall = function Paywall(_ref) {
       contentInterpolation = _ref.contentInterpolation;
   var instanceInfo = (0, _cozyClient.useInstanceInfo)();
 
-  var _useI18n = (0, _I18n.useI18n)(),
+  var _useI18n = (0, _twakeI18n.useI18n)(),
       t = _useI18n.t;
 
   var webviewIntent = (0, _cozyIntent.useWebviewIntent)();

package/dist/Paywall/locales/withPaywallLocales.js

@@ -1,13 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _withOnlyLocales = _interopRequireDefault(require("cozy-ui/transpiled/react/providers/I18n/withOnlyLocales"));
+var _twakeI18n = require("twake-i18n");
 
 var en = {
   action: {
@@ -444,6 +442,6 @@ var locales = {
   vi: vi
 };
 
-var _default = (0, _withOnlyLocales.default)(locales);
+var _default = (0, _twakeI18n.withOnlyLocales)(locales);
 
 exports.default = _default;

package/dist/Qualification/QualificationGrid/index.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _twakeI18n = require("twake-i18n");
+
 var _Grid = _interopRequireDefault(require("cozy-ui/transpiled/react/Grid"));
 
 var _Bank = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Bank"));
@@ -35,8 +37,6 @@ var _Team = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Team"
 
 var _Work = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Work"));
 
-var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
-
 var _helpers = require("./helpers");
 
 var _QualificationItem = _interopRequireDefault(require("../QualificationItem"));
@@ -67,7 +67,7 @@ var QualificationGrid = function QualificationGrid(_ref) {
       onClick = _ref.onClick;
   var themesList = (0, _helpers.getThemesList)(noHealth);
 
-  var _useI18n = (0, _I18n.useI18n)(),
+  var _useI18n = (0, _twakeI18n.useI18n)(),
       t = _useI18n.t;
 
   var _useState = (0, _react.useState)(),

package/dist/Qualification/QualificationGrid/locales/withLocales.js

@@ -1,13 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.locales = exports.default = void 0;
 
-var _withOnlyLocales = _interopRequireDefault(require("cozy-ui/transpiled/react/providers/I18n/withOnlyLocales"));
+var _twakeI18n = require("twake-i18n");
 
 var en = {
   themes: {
@@ -77,6 +75,6 @@ var locales = {
 };
 exports.locales = locales;
 
-var _default = (0, _withOnlyLocales.default)(locales);
+var _default = (0, _twakeI18n.withOnlyLocales)(locales);
 
 exports.default = _default;

package/dist/Qualification/QualificationModal/index.js

@@ -15,14 +15,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _twakeI18n = require("twake-i18n");
+
 var _cozyClient = require("cozy-client");
 
 var _qualification = require("cozy-client/dist/models/document/qualification");
 
 var _NestedSelectResponsive = _interopRequireDefault(require("cozy-ui/transpiled/react/NestedSelect/NestedSelectResponsive"));
 
-var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
-
 var _helpers = require("./helpers");
 
 var _locales = require("./locales");
@@ -38,10 +38,10 @@ var QualificationModal = function QualificationModal(_ref) {
       title = _ref.title,
       noDataLabel = _ref.noDataLabel,
       onClose = _ref.onClose;
-  (0, _I18n.useExtendI18n)(_locales.locales);
+  (0, _twakeI18n.useExtendI18n)(_locales.locales);
   var client = (0, _cozyClient.useClient)();
 
-  var _useI18n = (0, _I18n.useI18n)(),
+  var _useI18n = (0, _twakeI18n.useI18n)(),
       t = _useI18n.t,
       lang = _useI18n.lang;
 

package/dist/Storage/StorageButton.js

@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _twakeI18n = require("twake-i18n");
+
 var _cozyClient = require("cozy-client");
 
 var _instance = require("cozy-client/dist/models/instance");
@@ -21,15 +23,13 @@ var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
 
 var _TwakeWorkplace = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/TwakeWorkplace"));
 
-var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
-
 var _locales = require("./locales");
 
 var StorageButton = function StorageButton(_ref) {
   var className = _ref.className;
-  (0, _I18n.useExtendI18n)(_locales.locales);
+  (0, _twakeI18n.useExtendI18n)(_locales.locales);
 
-  var _useI18n = (0, _I18n.useI18n)(),
+  var _useI18n = (0, _twakeI18n.useI18n)(),
       t = _useI18n.t;
 
   var instanceInfo = (0, _cozyClient.useInstanceInfo)();

package/dist/Storage/StorageProgress.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _twakeI18n = require("twake-i18n");
+
 var _cozyClient = require("cozy-client");
 
 var _instance = require("cozy-client/dist/models/instance");
@@ -21,8 +23,6 @@ var _LinearProgress = _interopRequireDefault(require("cozy-ui/transpiled/react/L
 
 var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
 
-var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
-
 var _locales = require("./locales");
 
 /**
@@ -31,9 +31,9 @@ var _locales = require("./locales");
 var StorageProgress = function StorageProgress() {
   var _diskUsage$data, _diskUsage$data2;
 
-  (0, _I18n.useExtendI18n)(_locales.locales);
+  (0, _twakeI18n.useExtendI18n)(_locales.locales);
 
-  var _useI18n = (0, _I18n.useI18n)(),
+  var _useI18n = (0, _twakeI18n.useI18n)(),
       t = _useI18n.t;
 
   var _useInstanceInfo = (0, _cozyClient.useInstanceInfo)(),

package/dist/UploadQueue/Item.js

@@ -13,6 +13,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _twakeI18n = require("twake-i18n");
+
 var _file = require("cozy-client/dist/models/file");
 
 var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
@@ -27,8 +29,6 @@ var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typog
 
 var _Media = require("cozy-ui/transpiled/react/deprecated/Media");
 
-var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
-
 var _FileUploadProgress = _interopRequireDefault(require("./FileUploadProgress"));
 
 var _Pending = _interopRequireDefault(require("./Pending"));
@@ -127,6 +127,6 @@ var Item = function Item(_ref) {
   }), statusIcon && /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Media.Img, null, statusIcon)), isPending && /*#__PURE__*/_react.default.createElement(_Pending.default, null));
 };
 
-var _default = (0, _I18n.translate)()(Item);
+var _default = (0, _twakeI18n.translate)()(Item);
 
 exports.default = _default;

package/dist/UploadQueue/Pending.js

@@ -9,11 +9,11 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
+var _twakeI18n = require("twake-i18n");
 
-var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
+var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
 
-var Pending = (0, _I18n.translate)()(function (props) {
+var Pending = (0, _twakeI18n.translate)()(function (props) {
   return /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "subtitle1",
     color: "primary"

package/dist/UploadQueue/RemainingTime.js

@@ -11,9 +11,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
+var _twakeI18n = require("twake-i18n");
 
-var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
+var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
 
 var _helpers = require("./helpers");
 
@@ -43,7 +43,7 @@ var styles = {
 var RemainingTime = function RemainingTime(_ref) {
   var durationInSec = _ref.durationInSec;
 
-  var _useI18n = (0, _I18n.useI18n)(),
+  var _useI18n = (0, _twakeI18n.useI18n)(),
       t = _useI18n.t;
 
   return /*#__PURE__*/_react.default.createElement(_Typography.default, {

package/dist/UploadQueue/index.js

@@ -27,6 +27,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _twakeI18n = require("twake-i18n");
+
 var _LinearProgress = _interopRequireDefault(require("cozy-ui/transpiled/react/LinearProgress"));
 
 var _List = _interopRequireDefault(require("cozy-ui/transpiled/react/List"));
@@ -35,10 +37,6 @@ var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typog
 
 var _Button = _interopRequireDefault(require("cozy-ui/transpiled/react/deprecated/Button"));
 
-var _format = require("cozy-ui/transpiled/react/providers/I18n/format");
-
-var _withLocales = _interopRequireDefault(require("cozy-ui/transpiled/react/providers/I18n/withLocales"));
-
 var _styles = require("cozy-ui/transpiled/react/styles");
 
 var _Item = _interopRequireDefault(require("./Item"));
@@ -156,7 +154,7 @@ exports.uploadStatus = uploadStatus;
 
 var formatRemainingTime = function formatRemainingTime(durationInSec) {
   var later = Date.now() + durationInSec * 1000;
-  return (0, _format.formatLocallyDistanceToNow)(later);
+  return (0, _twakeI18n.formatLocallyDistanceToNow)(later);
 };
 
 exports.formatRemainingTime = formatRemainingTime;
@@ -272,6 +270,6 @@ UploadQueue.defaultProps = {
   popover: true
 };
 
-var _default = (0, _withLocales.default)(locales)(UploadQueue);
+var _default = (0, _twakeI18n.withLocales)(locales)(UploadQueue);
 
 exports.default = _default;

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, required }: {
+declare function FieldInput({ name, labelProps, className, attributes: { subFields, ...restAttributes }, contacts, error, helperText, label, isInvisible }: {
     name: any;
     labelProps: any;
     className: any;
@@ -12,7 +12,6 @@ declare function FieldInput({ name, labelProps, className, attributes: { subFiel
     helperText: any;
     label: any;
     isInvisible: any;
-    required: any;
 }): JSX.Element;
 declare namespace FieldInput {
     namespace propTypes {
@@ -26,12 +25,9 @@ declare namespace FieldInput {
         }>>;
         export let id: PropTypes.Requireable<string>;
         export let label: PropTypes.Requireable<string>;
-        export let required: PropTypes.Requireable<boolean>;
     }
     namespace defaultProps {
-        export let labelProps: any;
-        let required_1: boolean;
-        export { required_1 as required };
+        let labelProps: any;
     }
 }
 import PropTypes from 'prop-types';

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

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

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

@@ -1,5 +1,7 @@
-export const fieldsRequired: string[];
-export function validateFields(values: object, t: func): object;
+export function getFirstValueIfArray(values: any): {};
+export function hasNoValues(values: object, fields: import("../types").Field[]): boolean;
+export function makeIsRequiredError(required: boolean, formProps: object): boolean;
+export function validateFields(values: object, fields: import("../types").Field[], t: Function): object;
 export function makeItemLabel(item?: object): string;
 export function makeTypeAndLabel(itemLabel?: string): {
     type?: string;

package/dist/test/I18n.d.ts

@@ -1,6 +1,6 @@
 export function I18nContext(options: any): {
     t: any;
-    f: (date: any, formatStr: any, opts?: {}) => string | undefined;
+    f: (date: any, formatStr: any, opts?: {}) => string;
     polyglot: any;
     lang: any;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui-plus",
-  "version": "3.1.2",
+  "version": "4.1.0",
   "description": "Cozy-ui-plus is an extension of cozy-ui and provides components based on cozy-client",
   "main": "dist/index.js",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "cozy-intent": "^2.30.1",
     "cozy-logger": "^1.17.0",
     "cozy-stack-client": "^60.1.0",
-    "cozy-ui": "^134.0.0",
+    "cozy-ui": "^135.0.0",
     "jest": "26.6.3",
     "jest-canvas-mock": "2.3.1",
     "jest-environment-jsdom": "26.6.2",
@@ -49,6 +49,7 @@
     "react-dom": "16.12.0",
     "react-test-renderer": "16.12.0",
     "stylus": "0.64.0",
+    "twake-i18n": "^0.3.0",
     "typescript": "5.5.2"
   },
   "dependencies": {
@@ -68,9 +69,10 @@
     "cozy-device-helper": ">=2.0.0",
     "cozy-intent": ">=2.30.0",
     "cozy-logger": ">=1.17.0",
-    "cozy-ui": ">=134.0.0",
+    "cozy-ui": ">=135.0.0",
     "react": "^16 || ^17 || ^18",
-    "react-dom": "^16 || ^17 || ^18"
+    "react-dom": "^16 || ^17 || ^18",
+    "twake-i18n": ">=0.3.0"
   },
-  "gitHead": "7ec62d8445c373a3cb8de5234eee52d388ff274d"
+  "gitHead": "463474b57578fbca2e4fa04165e94abb82627d03"
 }

package/src/AppSections/Readme.md

@@ -1,7 +1,7 @@
 ```jsx
 import { useState } from 'react'
 import mockApps from './_mockApps'
-import { I18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import { I18n } from 'twake-i18n'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import Sections from 'cozy-ui/transpiled/react/AppSections'
 import Variants from 'cozy-ui/docs/components/Variants'

package/src/AppSections/Sections.jsx

@@ -1,11 +1,10 @@
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
+import { useI18n, useExtendI18n, withOnlyLocales } from 'twake-i18n'
 
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
-import withOnlyLocales from 'cozy-ui/transpiled/react/providers/I18n/withOnlyLocales'
 
 import styles from './Sections.styl'
 import * as catUtils from './categories'

package/src/AppSections/components/AppsSection.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import React, { useMemo } from 'react'
 
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
-import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import { useI18n } from 'twake-i18n'
 
 import styles from './AppsSection.styl'
 import AppTile from '../../AppTile'

package/src/AppSections/helpers.spec.js

@@ -1,4 +1,4 @@
-import { extend as extendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import { extend as extendI18n } from 'twake-i18n'
 
 import { getTranslatedManifestProperty } from './helpers'
 import en from './locales/en'

package/src/AppTile/AppTile.spec.jsx

@@ -4,8 +4,7 @@
 
 import { render } from '@testing-library/react'
 import React from 'react'
-
-import I18n from 'cozy-ui/transpiled/react/providers/I18n'
+import I18n from 'twake-i18n'
 
 import AppTile from '.'
 import en from '../AppSections/locales/en.json'

package/src/AppTile/Readme.md

@@ -4,7 +4,7 @@ a list of apps for example in the Store.
 ```jsx
 import AppTile from 'cozy-ui/transpiled/react/AppTile'
 import mockApps from '../AppSections/_mockApps'
-import { I18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import { I18n } from 'twake-i18n'
 import Grid from 'cozy-ui/transpiled/react/Grid'
 
 const locale = {}

package/src/AppTile/index.jsx

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
+import { createUseI18n } from 'twake-i18n'
 
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import WrenchCircleIcon from 'cozy-ui/transpiled/react/Icons/WrenchCircle'
@@ -11,7 +12,6 @@ import Tile, {
   TileIcon,
   TileDescription
 } from 'cozy-ui/transpiled/react/Tile'
-import { createUseI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { APP_STATUS, getCurrentStatusLabel } from './helpers'
 import en from './locales/en.json'

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

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Field, useForm } from 'react-final-form'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { makeFormattedAddressWithSubFields } from './helpers'
 import { locales } from './locales'

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

@@ -3,8 +3,7 @@ import uniqueId from 'lodash/uniqueId'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { Field } from 'react-final-form'
-
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import FieldInputWrapper from './FieldInputWrapper'
 import HasValueCondition from './HasValueCondition'
@@ -23,8 +22,7 @@ const FieldInput = ({
   error,
   helperText,
   label,
-  isInvisible,
-  required
+  isInvisible
 }) => {
   const [id] = useState(uniqueId('field_')) // state only use to generate id once and not at each render
   const [hasBeenFocused, setHasBeenFocused] = useState(false)
@@ -58,7 +56,6 @@ const FieldInput = ({
       )}
     >
       <Field
-        required={required}
         error={error}
         helperText={helperText}
         label={label}
@@ -112,13 +109,11 @@ FieldInput.propTypes = {
   }),
   // Destructuring props
   id: PropTypes.string,
-  label: PropTypes.string,
-  required: PropTypes.bool
+  label: PropTypes.string
 }
 
 FieldInput.defaultProps = {
-  labelProps: null,
-  required: false
+  labelProps: null
 }
 
 export default FieldInput

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

@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import DropdownIcon from 'cozy-ui/transpiled/react/Icons/Dropdown'
 import DropupIcon from 'cozy-ui/transpiled/react/Icons/Dropup'
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import FieldInput from './FieldInput'
 import { locales } from './locales'

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

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import React from 'react'
 import { FieldArray } from 'react-final-form-arrays'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
@@ -8,19 +9,19 @@ import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import CrossCircleIcon from 'cozy-ui/transpiled/react/Icons/CrossCircle'
 import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import FieldInput from './FieldInput'
-import { fieldsRequired, addField, removeField } from './helpers'
+import { addField, removeField, makeIsRequiredError } from './helpers'
 import { locales } from './locales'
 
 const FieldInputArray = ({
   attributes: { name, label, ...restAttributes },
   contacts,
-  formProps: { valid, submitFailed, errors }
+  formProps
 }) => {
   useExtendI18n(locales)
   const { t } = useI18n()
+  const { errors } = formProps
 
   return (
     <FieldArray name={name}>
@@ -31,8 +32,10 @@ const FieldInputArray = ({
               const key = fields.value[index]?.fieldId || nameWithIndex
               const showRemove = fields.value[index]?.[name]
               const inputName = `${nameWithIndex}.${name}`
-              const isError =
-                fieldsRequired.includes(inputName) && !valid && submitFailed
+              const isError = makeIsRequiredError(
+                restAttributes.required,
+                formProps
+              )
 
               return (
                 <div

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

@@ -1,14 +1,14 @@
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import FieldInput from './FieldInput'
 import FieldInputAccordion from './FieldInputAccordion'
 import FieldInputArray from './FieldInputArray'
-import { fieldsRequired } from './helpers'
+import { makeIsRequiredError } from './helpers'
 import { locales } from './locales'
 
 const FieldInputLayout = ({
@@ -19,10 +19,10 @@ const FieldInputLayout = ({
 }) => {
   useExtendI18n(locales)
   const { t } = useI18n()
-  const { valid, submitFailed, errors } = formProps
+  const { errors } = formProps
   const { name, label, ...restAttributes } = attributes
 
-  const isError = fieldsRequired.includes(name) && !valid && submitFailed
+  const isError = makeIsRequiredError(restAttributes.required, formProps)
 
   return (
     <div

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

@@ -25,8 +25,8 @@ const FieldInputWrapper = ({
 
   return (
     <Component
-      {...restAttributes}
       {...input}
+      {...restAttributes}
       {...props}
       variant={variant}
       fullWidth={fullWidth}

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

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import TextFieldSelect from './TextFieldSelect'
 import { makeCustomLabel, makeInitialCustomValue } from './helpers'

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

@@ -1,8 +1,8 @@
 import React from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import MenuItem from 'cozy-ui/transpiled/react/MenuItem'
 import TextField from 'cozy-ui/transpiled/react/TextField'
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { locales } from './locales'
 import { FieldInputWrapperPropTypes } from '../types'