cozy-ui 75.3.0 → 75.4.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [75.4.0](https://github.com/cozy/cozy-ui/compare/v75.3.0...v75.4.0) (2022-09-26)
+
+
+### Bug Fixes
+
+* **Viewer:** Ensute bool type for isEditable in ActionMenuWrapper ([464caac](https://github.com/cozy/cozy-ui/commit/464caac))
+* **Viewer:** QualificationListItemText was using bad dom structure and prop ([53c351b](https://github.com/cozy/cozy-ui/commit/53c351b))
+
+
+### Features
+
+* **Input:** Disables spell checking ([43040df](https://github.com/cozy/cozy-ui/commit/43040df))
+* **Viewer:** Show all possible qualification data, uninformed if empty ([c3d13d5](https://github.com/cozy/cozy-ui/commit/c3d13d5))
+
 # [75.3.0](https://github.com/cozy/cozy-ui/compare/v75.2.0...v75.3.0) (2022-09-22)
 
 

package/package.json

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

package/react/Input/__snapshots__/index.spec.jsx.snap

@@ -4,6 +4,7 @@ exports[`Input component should support number type 1`] = `
 <input
   className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR"
   onChange={[MockFunction]}
+  spellCheck={false}
   type="number"
   value="42"
 />

package/react/Input/index.jsx

@@ -36,6 +36,7 @@ const Input = forwardRef((props, ref) => {
       disabled={disabled}
       placeholder={placeholder}
       value={value}
+      spellCheck={false}
       {...restProps}
     />
   )

package/react/Viewer/Panel/ActionMenuWrapper.jsx

@@ -65,7 +65,7 @@ const ActionMenuWrapper = forwardRef(({ onClose, optionFile }, ref) => {
     return (
       <ActionMenuMobile
         onClose={onClose}
-        isEditable={editPath && isEditableAttribute}
+        isEditable={Boolean(editPath) && isEditableAttribute}
         actions={{ handleCopy, handleEdit }}
         appLink={url}
         appSlug={mespapiersAppSlug}
@@ -77,7 +77,7 @@ const ActionMenuWrapper = forwardRef(({ onClose, optionFile }, ref) => {
     <ActionMenuDesktop
       ref={ref}
       onClose={onClose}
-      isEditable={editPath && isEditableAttribute}
+      isEditable={Boolean(editPath) && isEditableAttribute}
       actions={{ handleCopy, handleEdit }}
       appLink={url}
       appSlug={mespapiersAppSlug}

package/react/Viewer/Panel/Qualification.jsx

@@ -6,8 +6,8 @@ import { withViewerLocales } from '../hoc/withViewerLocales'
 import {
   formatMetadataQualification,
   knownDateMetadataNames,
-  knowInformationMetadataNames,
-  knowOtherMetadataNames
+  knownInformationMetadataNames,
+  knownOtherMetadataNames
 } from '../helpers'
 import QualificationListItemContact from './QualificationListItemContact'
 import ActionMenuWrapper from './ActionMenuWrapper'
@@ -15,6 +15,20 @@ import QualificationListItemDate from './QualificationListItemDate'
 import QualificationListItemInformation from './QualificationListItemInformation'
 import QualificationListItemOther from './QualificationListItemOther'
 
+const makeQualificationListItemComp = metadataName => {
+  if (knownDateMetadataNames.includes(metadataName)) {
+    return QualificationListItemDate
+  }
+
+  if (knownInformationMetadataNames.includes(metadataName)) {
+    return QualificationListItemInformation
+  }
+
+  if (knownOtherMetadataNames.includes(metadataName)) {
+    return QualificationListItemOther
+  }
+}
+
 const Qualification = ({ file = {} }) => {
   const { metadata = {} } = file
   const actionBtnRef = useRef([])
@@ -35,60 +49,38 @@ const Qualification = ({ file = {} }) => {
     })
   }
 
-  const metadataComputed = useMemo(() => {
+  const formatedMetadataQualification = useMemo(() => {
     return formatMetadataQualification(metadata)
   }, [metadata])
 
   useEffect(() => {
-    actionBtnRef.current = metadataComputed.map(
+    actionBtnRef.current = formatedMetadataQualification.map(
       (_, idx) => actionBtnRef.current[idx] ?? createRef()
     )
-  }, [metadataComputed])
+  }, [formatedMetadataQualification])
 
   return (
     <List className={'u-pv-1'}>
-      {metadataComputed.map((meta, idx) => {
+      {formatedMetadataQualification.map((meta, idx) => {
         const { name } = meta
 
-        if (knownDateMetadataNames.includes(name)) {
-          return (
-            <QualificationListItemDate
-              key={idx}
-              ref={actionBtnRef.current[idx]}
-              metadataComputed={meta}
-              toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
-            />
-          )
+        if (name === 'contact') {
+          return <QualificationListItemContact key={idx} file={file} />
         }
 
-        if (knowInformationMetadataNames.includes(name)) {
-          return (
-            <QualificationListItemInformation
-              key={idx}
-              ref={actionBtnRef.current[idx]}
-              metadataComputed={meta}
-              toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
-            />
-          )
-        }
+        const QualificationListItemComp = makeQualificationListItemComp(name)
 
-        if (knowOtherMetadataNames.includes(name)) {
-          if (name === 'contact') {
-            return <QualificationListItemContact key={idx} file={file} />
-          }
-
-          return (
-            <QualificationListItemOther
-              key={idx}
-              ref={actionBtnRef.current[idx]}
-              metadataComputed={meta}
-              toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
-            />
-          )
-        }
+        return (
+          <QualificationListItemComp
+            key={idx}
+            ref={actionBtnRef.current[idx]}
+            formatedMetadataQualification={meta}
+            toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
+          />
+        )
       })}
 
-      {optionFile.value && (
+      {optionFile.name && (
         <ActionMenuWrapper
           onClose={hideActionsMenu}
           file={file}
@@ -104,4 +96,4 @@ Qualification.propTypes = {
   file: PropTypes.object
 }
 
-export default withViewerLocales(React.memo(Qualification))
+export default withViewerLocales(Qualification)

package/react/Viewer/Panel/QualificationListItemDate.jsx

@@ -11,16 +11,19 @@ import { useI18n } from '../../I18n'
 import { formatDate } from '../helpers'
 
 const QualificationListItemDate = forwardRef(
-  ({ metadataComputed, toggleActionsMenu }, ref) => {
+  ({ formatedMetadataQualification, toggleActionsMenu }, ref) => {
     const { t, f, lang } = useI18n()
-    const { name, value } = metadataComputed
-    const formattedDate = formatDate({ f, lang, date: value })
+    const { name, value } = formatedMetadataQualification
+    const formattedDate = value
+      ? formatDate({ f, lang, date: value })
+      : t('Viewer.panel.qualification.noInfo')
 
     return (
       <ListItem className={'u-pl-2 u-pr-3'}>
         <QualificationListItemText
           primary={t(`Viewer.panel.qualification.date.title.${name}`)}
           secondary={formattedDate}
+          disabled={!value}
         />
         <ListItemSecondaryAction>
           <IconButton
@@ -34,10 +37,11 @@ const QualificationListItemDate = forwardRef(
     )
   }
 )
+
 QualificationListItemDate.displayName = 'QualificationListItemDate'
 
 QualificationListItemDate.propTypes = {
-  metadataComputed: PropTypes.shape({
+  formatedMetadataQualification: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.string
   }).isRequired,

package/react/Viewer/Panel/QualificationListItemInformation.jsx

@@ -10,15 +10,16 @@ import QualificationListItemText from './QualificationListItemText'
 import { useI18n } from '../../I18n'
 
 const QualificationListItemInformation = forwardRef(
-  ({ metadataComputed, toggleActionsMenu }, ref) => {
+  ({ formatedMetadataQualification, toggleActionsMenu }, ref) => {
     const { t } = useI18n()
-    const { name, value } = metadataComputed
+    const { name, value } = formatedMetadataQualification
 
     return (
       <ListItem className={'u-pl-2 u-pr-3'}>
         <QualificationListItemText
           primary={t(`Viewer.panel.qualification.information.title.${name}`)}
-          secondary={value}
+          secondary={value || t('Viewer.panel.qualification.noInfo')}
+          disabled={!value}
         />
         <ListItemSecondaryAction>
           <IconButton ref={ref} onClick={() => toggleActionsMenu(value)}>
@@ -29,10 +30,11 @@ const QualificationListItemInformation = forwardRef(
     )
   }
 )
+
 QualificationListItemInformation.displayName = 'QualificationListItemNumber'
 
 QualificationListItemInformation.propTypes = {
-  metadataComputed: PropTypes.shape({
+  formatedMetadataQualification: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.string
   }).isRequired,

package/react/Viewer/Panel/QualificationListItemOther.jsx

@@ -19,10 +19,10 @@ const {
 } = models
 
 const QualificationListItemOther = forwardRef(
-  ({ metadataComputed, toggleActionsMenu }, ref) => {
+  ({ formatedMetadataQualification, toggleActionsMenu }, ref) => {
     const { t, lang } = useI18n()
     const scannerT = getBoundT(lang)
-    const { name, value } = metadataComputed
+    const { name, value } = formatedMetadataQualification
 
     if (!value) return null
 
@@ -52,7 +52,7 @@ const QualificationListItemOther = forwardRef(
 QualificationListItemOther.displayName = 'QualificationListItemOther'
 
 QualificationListItemOther.propTypes = {
-  metadataComputed: PropTypes.shape({
+  formatedMetadataQualification: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.string
   }).isRequired,

package/react/Viewer/Panel/QualificationListItemText.jsx

@@ -4,19 +4,27 @@ import PropTypes from 'prop-types'
 import ListItemText from '../../ListItemText'
 import Typography from '../../Typography'
 
-const QualificationListItemText = ({ primary, secondary }) => {
+const QualificationListItemText = ({ primary, secondary, disabled }) => {
   return (
     <ListItemText
       disableTypography
-      primary={<Typography variant={'caption'}>{primary}</Typography>}
-      secondary={<Typography variant={'body1'}>{secondary}</Typography>}
+      primary={<Typography variant="caption">{primary}</Typography>}
+      secondary={
+        <Typography
+          component="div"
+          variant="body1"
+          style={disabled ? { color: 'var(--disabledTextColor)' } : undefined}
+        >
+          {secondary}
+        </Typography>
+      }
     />
   )
 }
 
 QualificationListItemText.propTypes = {
   primary: PropTypes.string.isRequired,
-  secondary: PropTypes.string.isRequired
+  secondary: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
 }
 
 export default QualificationListItemText

package/react/Viewer/Readme.md

@@ -58,8 +58,14 @@ const files = [
     mime: 'application/pdf',
     metadata: {
       carbonCopy: true,
+      AObtentionDate: null,
       BObtentionDate: "2022-02-09T09:05:38.000Z",
+      CObtentionDate: null,
+      DObtentionDate: null,
+      datetime: "2022-09-23T07:50:22.000Z",
       datetimeLabel: "BObtentionDate",
+      number: "",
+      page: "front",
       qualification: {
         label: "driver_license",
         purpose: "attestation",
@@ -170,8 +176,6 @@ const editPathByModelProps = {
                 files={files}
                 currentIndex={state.currentIndex}
                 currentURL={state.currentURL}
-                onCloseRequest={toggleViewer}
-                onChangeRequest={onFileChange}
                 showNavigation={variant.navigation}
                 editPathByModelProps={editPathByModelProps}
                 onlyOfficeProps={{
@@ -182,6 +186,8 @@ const editPathByModelProps = {
                   showToolbar: variant.toolbar,
                   showClose: state.showToolbarCloseButton
                 }}
+                onCloseRequest={toggleViewer}
+                onChangeRequest={onFileChange}
               >
                 <FooterActionButtons>
                   <ShareButtonFake />

package/react/Viewer/helpers.js

@@ -15,19 +15,19 @@ export const knownDateMetadataNames = [
   'date',
   'datetime'
 ]
-export const knowInformationMetadataNames = [
+export const knownInformationMetadataNames = [
   'number',
   'cardNumber',
   'vinNumber',
   'ibanNumber',
   'country'
 ]
-export const knowOtherMetadataNames = ['contact', 'page', 'qualification']
+export const knownOtherMetadataNames = ['contact', 'page', 'qualification']
 
 export const getCurrentModel = metadataName => {
   if (
     knownDateMetadataNames.includes(metadataName) ||
-    knowInformationMetadataNames.includes(metadataName)
+    knownInformationMetadataNames.includes(metadataName)
   ) {
     return 'information'
   }
@@ -87,41 +87,61 @@ export const downloadFile = async ({ client, file, url }) => {
 
 export const isFileEncrypted = file => isEncrypted(file)
 
+const makeMetadataQualification = ({ metadata, knownMetadataName, value }) => {
+  const shouldReturnThisMetadata = Object.keys(metadata).includes(
+    knownMetadataName
+  )
+
+  if (shouldReturnThisMetadata) {
+    return { name: knownMetadataName, value: value || null }
+  }
+}
+
 /**
  * @param {Object} metadata
  * @returns {{ name: string, value: string }[]} Array of formated metadata
  */
 export const formatMetadataQualification = metadata => {
   const dates = knownDateMetadataNames
-    .map(dateName => {
-      if (metadata[dateName]) {
-        return { name: dateName, value: metadata[dateName] }
-      }
-    })
+    .map(dateName =>
+      makeMetadataQualification({
+        metadata,
+        knownMetadataName: dateName,
+        value: metadata[dateName]
+      })
+    )
     .filter(Boolean)
     .filter((data, _, arr) => {
       if (arr.length > 1) return data.name !== 'datetime'
       return data
     })
 
-  const numbers = knowInformationMetadataNames
-    .map(numberName => {
-      if (metadata[numberName]) {
-        return { name: numberName, value: metadata[numberName] }
-      }
-    })
+  const informations = knownInformationMetadataNames
+    .map(numberName =>
+      makeMetadataQualification({
+        metadata,
+        knownMetadataName: numberName,
+        value: metadata[numberName]
+      })
+    )
     .filter(Boolean)
 
-  const others = knowOtherMetadataNames
+  const others = knownOtherMetadataNames
     .map(otherName => {
-      if (otherName === 'qualification') {
-        return { name: otherName, value: metadata[otherName]?.label }
-      }
-      return { name: otherName, value: metadata[otherName] }
+      const value =
+        otherName === 'qualification'
+          ? metadata[otherName]?.label
+          : metadata[otherName]
+
+      return makeMetadataQualification({
+        metadata,
+        knownMetadataName: otherName,
+        value
+      })
     })
     .filter(Boolean)
 
-  return [...dates, ...numbers, ...others]
+  return [...dates, ...informations, ...others]
 }
 
 export const formatDate = ({ f, lang, date }) => {

package/react/Viewer/helpers.spec.js

@@ -7,7 +7,7 @@ import {
   getCurrentModel,
   buildEditAttributePath,
   knownDateMetadataNames,
-  knowInformationMetadataNames
+  knownInformationMetadataNames
 } from './helpers'
 
 const fakeMetadata = {
@@ -125,7 +125,7 @@ describe('helpers', () => {
   })
   describe('getCurrentModel', () => {
     const expected = 'information'
-    it.each([...knownDateMetadataNames, ...knowInformationMetadataNames])(
+    it.each([...knownDateMetadataNames, ...knownInformationMetadataNames])(
       `getCurrentModel(%s) should return ${expected}`,
       input => {
         expect(getCurrentModel(input)).toBe(expected)

package/react/Viewer/locales/en.json

@@ -64,6 +64,7 @@
         "front": "Front side",
         "back": "Back side",
         "qualification": "Qualification",
+        "noInfo": "No information",
         "actions": {
           "copy": "Copy",
           "copyClipboard": "Copy to clipboard",

package/react/Viewer/locales/fr.json

@@ -64,6 +64,7 @@
         "front": "Face avant",
         "back": "Face arrière",
         "qualification": "Qualification",
+        "noInfo": "Non renseigné(e)",
         "actions": {
           "copy": "Copier",
           "copyClipboard": "Copier dans le presse-papier",

package/react/__snapshots__/examples.spec.jsx.snap

@@ -2882,21 +2882,21 @@ exports[`Field should render examples: Field 1`] = `
 exports[`Field should render examples: Field 2`] = `
 "<div>
   <form>
-    <div class=\\"styles__o-field___3n5HM styles__o-field--inline___7JWZ8\\"><label for=\\"idField\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'm a label</label><input type=\\"text\\" id=\\"idField\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--medium___28jPV\\" placeholder=\\"Write something\\" value=\\"\\"></div>
+    <div class=\\"styles__o-field___3n5HM styles__o-field--inline___7JWZ8\\"><label for=\\"idField\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'm a label</label><input type=\\"text\\" id=\\"idField\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--medium___28jPV\\" placeholder=\\"Write something\\" spellcheck=\\"false\\" value=\\"\\"></div>
   </form>
 </div>"
 `;
 
 exports[`Field should render examples: Field 3`] = `
 "<div>
-  <div class=\\"styles__o-field___3n5HM\\"><label for=\\"controlled-field\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\"></label><input type=\\"text\\" id=\\"controlled-field\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" value=\\"\\"></div>
+  <div class=\\"styles__o-field___3n5HM\\"><label for=\\"controlled-field\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\"></label><input type=\\"text\\" id=\\"controlled-field\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" spellcheck=\\"false\\" value=\\"\\"></div>
 </div>"
 `;
 
 exports[`Field should render examples: Field 4`] = `
 "<div>
   <div>
-    <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I can have focus</label><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Focus please\\" value=\\"\\"></div><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--center___16_Xh\\"><span><span>Focus!</span>Set Focus</span></button>
+    <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I can have focus</label><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Focus please\\" spellcheck=\\"false\\" value=\\"\\"></div><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--center___16_Xh\\"><span><span>Focus!</span>Set Focus</span></button>
   </div>
 </div>"
 `;
@@ -2904,7 +2904,7 @@ exports[`Field should render examples: Field 4`] = `
 exports[`Field should render examples: Field 5`] = `
 "<div>
   <form>
-    <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I got a name</label><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" name=\\"foo\\" value=\\"\\"></div>
+    <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I got a name</label><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" spellcheck=\\"false\\" name=\\"foo\\" value=\\"\\"></div>
   </form>
 </div>"
 `;
@@ -2912,7 +2912,7 @@ exports[`Field should render examples: Field 5`] = `
 exports[`Field should render examples: Field 6`] = `
 "<div>
   <form>
-    <div class=\\"styles__o-field___3n5HM\\"><label for=\\"idFieldError\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'm an error label</label><input type=\\"text\\" id=\\"idFieldError\\" class=\\"styles__c-input-text___3TAv1 styles__is-error___3lsCJ styles__c-input-text--large___28EaR\\" placeholder=\\"I'm an error input[type=text]\\" value=\\"\\"></div>
+    <div class=\\"styles__o-field___3n5HM\\"><label for=\\"idFieldError\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'm an error label</label><input type=\\"text\\" id=\\"idFieldError\\" class=\\"styles__c-input-text___3TAv1 styles__is-error___3lsCJ styles__c-input-text--large___28EaR\\" placeholder=\\"I'm an error input[type=text]\\" spellcheck=\\"false\\" value=\\"\\"></div>
   </form>
 </div>"
 `;
@@ -2975,7 +2975,7 @@ exports[`Field should render examples: Field 9`] = `
   <form>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"idFieldPassword\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'm a password label</label>
       <div class=\\"styles__o-field-input___vCqdV\\">
-        <div class=\\"styles__c-label___o4ozG styles__o-field-input-action___2k7a8\\">Show</div><input type=\\"password\\" id=\\"idFieldPassword\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" value=\\"\\">
+        <div class=\\"styles__c-label___o4ozG styles__o-field-input-action___2k7a8\\">Show</div><input type=\\"password\\" id=\\"idFieldPassword\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" spellcheck=\\"false\\" value=\\"\\">
       </div>
     </div>
   </form>
@@ -2987,7 +2987,7 @@ exports[`Field should render examples: Field 10`] = `
   <form>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"idFieldPassword\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'm a password label</label>
       <div class=\\"styles__o-field-input___vCqdV\\">
-        <div class=\\"styles__c-label___o4ozG styles__o-field-input-action___2k7a8\\"></div><input type=\\"password\\" id=\\"idFieldPassword\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" value=\\"\\">
+        <div class=\\"styles__c-label___o4ozG styles__o-field-input-action___2k7a8\\"></div><input type=\\"password\\" id=\\"idFieldPassword\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" spellcheck=\\"false\\" value=\\"\\">
       </div>
     </div>
   </form>
@@ -2998,7 +2998,7 @@ exports[`Field should render examples: Field 11`] = `
 "<div>
   <form>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'm a label</label>
-      <div class=\\"styles__o-side___tXbXL styles__c-label___o4ozG\\">(optional)</div><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" value=\\"\\">
+      <div class=\\"styles__o-side___tXbXL styles__c-label___o4ozG\\">(optional)</div><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" spellcheck=\\"false\\" value=\\"\\">
     </div>
   </form>
 </div>"
@@ -3008,7 +3008,7 @@ exports[`Field should render examples: Field 12`] = `
 "<div>
   <form>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'm a label</label>
-      <div class=\\"styles__o-side___tXbXL styles__c-label___o4ozG styles__o-side-fullwidth___7WcCI\\">(optional)</div><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR styles__c-input-text--fullwidth___33o_f\\" placeholder=\\"\\" value=\\"\\">
+      <div class=\\"styles__o-side___tXbXL styles__c-label___o4ozG styles__o-side-fullwidth___7WcCI\\">(optional)</div><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR styles__c-input-text--fullwidth___33o_f\\" placeholder=\\"\\" spellcheck=\\"false\\" value=\\"\\">
     </div>
   </form>
 </div>"
@@ -3017,7 +3017,7 @@ exports[`Field should render examples: Field 12`] = `
 exports[`Field should render examples: Field 13`] = `
 "<div>
   <form>
-    <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\" style=\\"color: teal;\\">I'm a label</label><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" style=\\"border-color: teal;\\" value=\\"\\"></div>
+    <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\" style=\\"color: teal;\\">I'm a label</label><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" spellcheck=\\"false\\" style=\\"border-color: teal;\\" value=\\"\\"></div>
   </form>
 </div>"
 `;
@@ -3029,7 +3029,7 @@ exports[`Field should render examples: Field 14`] = `
       <div class=\\"styles__o-field-input___vCqdV\\">
         <div class=\\"styles__o-field-input-action___2k7a8\\">
           <div style=\\"margin-top: -0.5rem;\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-textSizeSmall MuiButton-sizeSmall\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">Show</span></button></div>
-        </div><input type=\\"password\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" style=\\"border-color: teal;\\" value=\\"\\">
+        </div><input type=\\"password\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" spellcheck=\\"false\\" style=\\"border-color: teal;\\" value=\\"\\">
       </div>
     </div>
   </form>
@@ -3040,7 +3040,7 @@ exports[`Field should render examples: Field 15`] = `
 "<div>
   <form>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\"></label>
-      <div class=\\"styles__o-side___tXbXL styles__c-label___o4ozG styles__o-side-fullwidth___7WcCI\\">(optional)</div><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR styles__c-input-text--fullwidth___33o_f\\" placeholder=\\"\\" value=\\"\\">
+      <div class=\\"styles__o-side___tXbXL styles__c-label___o4ozG styles__o-side-fullwidth___7WcCI\\">(optional)</div><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR styles__c-input-text--fullwidth___33o_f\\" placeholder=\\"\\" spellcheck=\\"false\\" value=\\"\\">
     </div>Value:
   </form>
 </div>"
@@ -3052,7 +3052,7 @@ exports[`Field should render examples: Field 16`] = `
     <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5 MuiTypography-colorTextPrimary\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">AUTOCAPITALIZE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">AUTOCOMPLETE</span></label>
   </div>
   <form>
-    <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\"></label><input autocomplete=\\"off\\" type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" autocapitalize=\\"none\\" value=\\"\\"></div>
+    <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\"></label><input autocomplete=\\"off\\" type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" spellcheck=\\"false\\" autocapitalize=\\"none\\" value=\\"\\"></div>
   </form>
 </div>"
 `;
@@ -8437,7 +8437,7 @@ exports[`InputGroup should render examples: InputGroup 1`] = `
   <form>
     <div>
       <div class=\\"styles__c-inputgroup___12OVJ\\">
-        <div class=\\"styles__c-inputgroup-main___1LP4B\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Placeholder\\" value=\\"\\"></div>
+        <div class=\\"styles__c-inputgroup-main___1LP4B\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Placeholder\\" spellcheck=\\"false\\" value=\\"\\"></div>
         <div class=\\"styles__c-inputgroup-side___60v0v\\"><span class=\\"styles__c-inputgroup-unit___bFj9a\\">€</span></div>
       </div>
     </div>
@@ -8453,7 +8453,7 @@ exports[`InputGroup should render examples: InputGroup 2`] = `
         <div class=\\"styles__c-inputgroup-side___60v0v\\">
           <h6 class=\\"MuiTypography-root u-pl-1 MuiTypography-h6 MuiTypography-colorTextPrimary\\">text</h6>
         </div>
-        <div class=\\"styles__c-inputgroup-main___1LP4B\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Placeholder\\" value=\\"\\"></div>
+        <div class=\\"styles__c-inputgroup-main___1LP4B\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Placeholder\\" spellcheck=\\"false\\" value=\\"\\"></div>
       </div>
     </div>
   </form>
@@ -8465,8 +8465,8 @@ exports[`InputGroup should render examples: InputGroup 3`] = `
   <form>
     <div>
       <div class=\\"styles__c-inputgroup___12OVJ\\">
-        <div class=\\"styles__c-inputgroup-main___1LP4B\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Email\\" value=\\"\\"></div>
-        <div class=\\"styles__c-inputgroup-side___60v0v\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR u-w-4\\" placeholder=\\"@domain.tld\\" value=\\"\\"></div>
+        <div class=\\"styles__c-inputgroup-main___1LP4B\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Email\\" spellcheck=\\"false\\" value=\\"\\"></div>
+        <div class=\\"styles__c-inputgroup-side___60v0v\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR u-w-4\\" placeholder=\\"@domain.tld\\" spellcheck=\\"false\\" value=\\"\\"></div>
       </div>
     </div>
   </form>
@@ -8478,7 +8478,7 @@ exports[`InputGroup should render examples: InputGroup 4`] = `
   <form>
     <div>
       <div class=\\"styles__c-inputgroup___12OVJ\\">
-        <div class=\\"styles__c-inputgroup-main___1LP4B\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"URL\\" value=\\"\\"></div>
+        <div class=\\"styles__c-inputgroup-main___1LP4B\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"URL\\" spellcheck=\\"false\\" value=\\"\\"></div>
         <div class=\\"styles__c-inputgroup-side___60v0v\\">
           <div class=\\"styles__select--autowidth___16AEp u-w-4 css-2b097c-container\\"><span aria-live=\\"polite\\" aria-atomic=\\"false\\" aria-relevant=\\"additions text\\" class=\\"css-1f43avz-a11yText-A11yText\\"></span>
             <div class=\\" css-1x8e986-control\\">
@@ -8509,7 +8509,7 @@ exports[`InputGroup should render examples: InputGroup 5`] = `
   <form>
     <div>
       <div class=\\"styles__c-inputgroup___12OVJ styles__c-inputgroup--fullwidth___3nuay\\">
-        <div class=\\"styles__c-inputgroup-main___1LP4B\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Placeholder\\" value=\\"\\"></div>
+        <div class=\\"styles__c-inputgroup-main___1LP4B\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Placeholder\\" spellcheck=\\"false\\" value=\\"\\"></div>
         <div class=\\"styles__c-inputgroup-side___60v0v\\">
           <h6 class=\\"MuiTypography-root u-pr-1 MuiTypography-h6 MuiTypography-colorTextPrimary\\">text</h6>
         </div>
@@ -8524,7 +8524,7 @@ exports[`InputGroup should render examples: InputGroup 6`] = `
   <form>
     <div>
       <div class=\\"styles__c-inputgroup___12OVJ styles__c-inputgroup--error___1JNbu\\">
-        <div class=\\"styles__c-inputgroup-main___1LP4B\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Placeholder\\" value=\\"\\"></div>
+        <div class=\\"styles__c-inputgroup-main___1LP4B\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Placeholder\\" spellcheck=\\"false\\" value=\\"\\"></div>
         <div class=\\"styles__c-inputgroup-side___60v0v\\">
           <h6 class=\\"MuiTypography-root u-pr-1 MuiTypography-h6 MuiTypography-colorTextPrimary\\">text</h6>
         </div>
@@ -8542,7 +8542,7 @@ exports[`InputGroup should render examples: InputGroup 7`] = `
         <div class=\\"styles__c-inputgroup-side___60v0v\\">
           <h6 class=\\"MuiTypography-root u-pl-1 MuiTypography-h6 MuiTypography-colorTextPrimary\\">text</h6>
         </div>
-        <div class=\\"styles__c-inputgroup-main___1LP4B\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Placeholder\\" value=\\"\\"></div>
+        <div class=\\"styles__c-inputgroup-main___1LP4B\\"><input type=\\"text\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Placeholder\\" spellcheck=\\"false\\" value=\\"\\"></div>
       </div>
     </div>
   </form>
@@ -8552,7 +8552,7 @@ exports[`InputGroup should render examples: InputGroup 7`] = `
 exports[`Label should render examples: Label 1`] = `
 "<div>
   <form>
-    <div><label for=\\"idInput\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">This is a label</label><input type=\\"text\\" id=\\"idInput\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Recherche\\" value=\\"\\"></div>
+    <div><label for=\\"idInput\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">This is a label</label><input type=\\"text\\" id=\\"idInput\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Recherche\\" spellcheck=\\"false\\" value=\\"\\"></div>
   </form>
 </div>"
 `;
@@ -8560,7 +8560,7 @@ exports[`Label should render examples: Label 1`] = `
 exports[`Label should render examples: Label 2`] = `
 "<div>
   <form>
-    <div><label for=\\"idInput2\\" class=\\"styles__c-label___o4ozG\\">This is an inline label</label><input type=\\"text\\" id=\\"idInput2\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Recherche\\" value=\\"\\"></div>
+    <div><label for=\\"idInput2\\" class=\\"styles__c-label___o4ozG\\">This is an inline label</label><input type=\\"text\\" id=\\"idInput2\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Recherche\\" spellcheck=\\"false\\" value=\\"\\"></div>
   </form>
 </div>"
 `;
@@ -8568,7 +8568,7 @@ exports[`Label should render examples: Label 2`] = `
 exports[`Label should render examples: Label 3`] = `
 "<div>
   <form>
-    <div><label for=\\"idInput2\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7 styles__is-error___2Dwem\\">This is an error label</label><input type=\\"text\\" id=\\"idInput2\\" class=\\"styles__c-input-text___3TAv1 styles__is-error___3lsCJ styles__c-input-text--large___28EaR\\" placeholder=\\"Recherche\\" value=\\"\\"></div>
+    <div><label for=\\"idInput2\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7 styles__is-error___2Dwem\\">This is an error label</label><input type=\\"text\\" id=\\"idInput2\\" class=\\"styles__c-input-text___3TAv1 styles__is-error___3lsCJ styles__c-input-text--large___28EaR\\" placeholder=\\"Recherche\\" spellcheck=\\"false\\" value=\\"\\"></div>
   </form>
 </div>"
 `;
@@ -9403,8 +9403,8 @@ exports[`Wizard should render examples: Wizard 1`] = `
         <h3 class=\\"MuiTypography-root styles__wizard-title___11Dzr MuiTypography-h3 MuiTypography-colorTextPrimary\\">Connect to your Cozy</h3>
       </header>
       <div class=\\"styles__wizard-main___ObvId\\">
-        <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">Login</label><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"dalailama@cozycloud.cc\\" value=\\"\\"></div>
-        <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">Password</label><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" value=\\"\\"></div>
+        <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">Login</label><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"dalailama@cozycloud.cc\\" spellcheck=\\"false\\" value=\\"\\"></div>
+        <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">Password</label><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" spellcheck=\\"false\\" value=\\"\\"></div>
         <p class=\\"styles__wizard-errors___1ufSE u-error\\">There is an error</p>
       </div>
       <footer class=\\"styles__wizard-footer___-ZrgM u-pb-2\\"><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--large___2gatN styles__c-btn--center___16_Xh styles__wizard-next___38lPl\\"><span><span>Next step</span><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: white;\\" width=\\"16\\" height=\\"16\\">

package/transpiled/react/Input/index.js

@@ -39,7 +39,8 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
     className: cx(styles['c-input-text'], (_cx = {}, _defineProperty(_cx, styles["is-error"], error), _defineProperty(_cx, styles["c-input-text--".concat(size)], size), _defineProperty(_cx, styles["c-input-text--fullwidth"], fullwidth), _cx), className),
     disabled: disabled,
     placeholder: placeholder,
-    value: value
+    value: value,
+    spellCheck: false
   }, restProps));
 });
 Input.displayName = 'Input';

package/transpiled/react/Viewer/Panel/ActionMenuWrapper.js

@@ -65,7 +65,7 @@ var ActionMenuWrapper = /*#__PURE__*/forwardRef(function (_ref, ref) {
   if (isMobile) {
     return /*#__PURE__*/React.createElement(ActionMenuMobile, {
       onClose: onClose,
-      isEditable: editPath && isEditableAttribute,
+      isEditable: Boolean(editPath) && isEditableAttribute,
       actions: {
         handleCopy: handleCopy,
         handleEdit: handleEdit
@@ -78,7 +78,7 @@ var ActionMenuWrapper = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(ActionMenuDesktop, {
     ref: ref,
     onClose: onClose,
-    isEditable: editPath && isEditableAttribute,
+    isEditable: Boolean(editPath) && isEditableAttribute,
     actions: {
       handleCopy: handleCopy,
       handleEdit: handleEdit

package/transpiled/react/Viewer/Panel/Qualification.js

@@ -3,13 +3,27 @@ import React, { useRef, useState, createRef, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import List from "cozy-ui/transpiled/react/MuiCozyTheme/List";
 import { withViewerLocales } from "cozy-ui/transpiled/react/Viewer/hoc/withViewerLocales";
-import { formatMetadataQualification, knownDateMetadataNames, knowInformationMetadataNames, knowOtherMetadataNames } from "cozy-ui/transpiled/react/Viewer/helpers";
+import { formatMetadataQualification, knownDateMetadataNames, knownInformationMetadataNames, knownOtherMetadataNames } from "cozy-ui/transpiled/react/Viewer/helpers";
 import QualificationListItemContact from "cozy-ui/transpiled/react/Viewer/Panel/QualificationListItemContact";
 import ActionMenuWrapper from "cozy-ui/transpiled/react/Viewer/Panel/ActionMenuWrapper";
 import QualificationListItemDate from "cozy-ui/transpiled/react/Viewer/Panel/QualificationListItemDate";
 import QualificationListItemInformation from "cozy-ui/transpiled/react/Viewer/Panel/QualificationListItemInformation";
 import QualificationListItemOther from "cozy-ui/transpiled/react/Viewer/Panel/QualificationListItemOther";
 
+var makeQualificationListItemComp = function makeQualificationListItemComp(metadataName) {
+  if (knownDateMetadataNames.includes(metadataName)) {
+    return QualificationListItemDate;
+  }
+
+  if (knownInformationMetadataNames.includes(metadataName)) {
+    return QualificationListItemInformation;
+  }
+
+  if (knownOtherMetadataNames.includes(metadataName)) {
+    return QualificationListItemOther;
+  }
+};
+
 var Qualification = function Qualification(_ref) {
   var _ref$file = _ref.file,
       file = _ref$file === void 0 ? {} : _ref$file;
@@ -49,61 +63,38 @@ var Qualification = function Qualification(_ref) {
     });
   };
 
-  var metadataComputed = useMemo(function () {
+  var formatedMetadataQualification = useMemo(function () {
     return formatMetadataQualification(metadata);
   }, [metadata]);
   useEffect(function () {
-    actionBtnRef.current = metadataComputed.map(function (_, idx) {
+    actionBtnRef.current = formatedMetadataQualification.map(function (_, idx) {
       var _actionBtnRef$current;
 
       return (_actionBtnRef$current = actionBtnRef.current[idx]) !== null && _actionBtnRef$current !== void 0 ? _actionBtnRef$current : /*#__PURE__*/createRef();
     });
-  }, [metadataComputed]);
+  }, [formatedMetadataQualification]);
   return /*#__PURE__*/React.createElement(List, {
     className: 'u-pv-1'
-  }, metadataComputed.map(function (meta, idx) {
+  }, formatedMetadataQualification.map(function (meta, idx) {
     var name = meta.name;
 
-    if (knownDateMetadataNames.includes(name)) {
-      return /*#__PURE__*/React.createElement(QualificationListItemDate, {
+    if (name === 'contact') {
+      return /*#__PURE__*/React.createElement(QualificationListItemContact, {
         key: idx,
-        ref: actionBtnRef.current[idx],
-        metadataComputed: meta,
-        toggleActionsMenu: function toggleActionsMenu(val) {
-          return _toggleActionsMenu(idx, name, val);
-        }
+        file: file
       });
     }
 
-    if (knowInformationMetadataNames.includes(name)) {
-      return /*#__PURE__*/React.createElement(QualificationListItemInformation, {
-        key: idx,
-        ref: actionBtnRef.current[idx],
-        metadataComputed: meta,
-        toggleActionsMenu: function toggleActionsMenu(val) {
-          return _toggleActionsMenu(idx, name, val);
-        }
-      });
-    }
-
-    if (knowOtherMetadataNames.includes(name)) {
-      if (name === 'contact') {
-        return /*#__PURE__*/React.createElement(QualificationListItemContact, {
-          key: idx,
-          file: file
-        });
+    var QualificationListItemComp = makeQualificationListItemComp(name);
+    return /*#__PURE__*/React.createElement(QualificationListItemComp, {
+      key: idx,
+      ref: actionBtnRef.current[idx],
+      formatedMetadataQualification: meta,
+      toggleActionsMenu: function toggleActionsMenu(val) {
+        return _toggleActionsMenu(idx, name, val);
       }
-
-      return /*#__PURE__*/React.createElement(QualificationListItemOther, {
-        key: idx,
-        ref: actionBtnRef.current[idx],
-        metadataComputed: meta,
-        toggleActionsMenu: function toggleActionsMenu(val) {
-          return _toggleActionsMenu(idx, name, val);
-        }
-      });
-    }
-  }), optionFile.value && /*#__PURE__*/React.createElement(ActionMenuWrapper, {
+    });
+  }), optionFile.name && /*#__PURE__*/React.createElement(ActionMenuWrapper, {
     onClose: hideActionsMenu,
     file: file,
     optionFile: optionFile,
@@ -114,4 +105,4 @@ var Qualification = function Qualification(_ref) {
 Qualification.propTypes = {
   file: PropTypes.object
 };
-export default withViewerLocales( /*#__PURE__*/React.memo(Qualification));
+export default withViewerLocales(Qualification);

package/transpiled/react/Viewer/Panel/QualificationListItemDate.js

@@ -9,7 +9,7 @@ import QualificationListItemText from "cozy-ui/transpiled/react/Viewer/Panel/Qua
 import { useI18n } from "cozy-ui/transpiled/react/I18n";
 import { formatDate } from "cozy-ui/transpiled/react/Viewer/helpers";
 var QualificationListItemDate = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var metadataComputed = _ref.metadataComputed,
+  var formatedMetadataQualification = _ref.formatedMetadataQualification,
       toggleActionsMenu = _ref.toggleActionsMenu;
 
   var _useI18n = useI18n(),
@@ -17,18 +17,19 @@ var QualificationListItemDate = /*#__PURE__*/forwardRef(function (_ref, ref) {
       f = _useI18n.f,
       lang = _useI18n.lang;
 
-  var name = metadataComputed.name,
-      value = metadataComputed.value;
-  var formattedDate = formatDate({
+  var name = formatedMetadataQualification.name,
+      value = formatedMetadataQualification.value;
+  var formattedDate = value ? formatDate({
     f: f,
     lang: lang,
     date: value
-  });
+  }) : t('Viewer.panel.qualification.noInfo');
   return /*#__PURE__*/React.createElement(ListItem, {
     className: 'u-pl-2 u-pr-3'
   }, /*#__PURE__*/React.createElement(QualificationListItemText, {
     primary: t("Viewer.panel.qualification.date.title.".concat(name)),
-    secondary: formattedDate
+    secondary: formattedDate,
+    disabled: !value
   }), /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(IconButton, {
     ref: ref,
     onClick: function onClick() {
@@ -40,7 +41,7 @@ var QualificationListItemDate = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 QualificationListItemDate.displayName = 'QualificationListItemDate';
 QualificationListItemDate.propTypes = {
-  metadataComputed: PropTypes.shape({
+  formatedMetadataQualification: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.string
   }).isRequired,

package/transpiled/react/Viewer/Panel/QualificationListItemInformation.js

@@ -8,19 +8,20 @@ import Dots from "cozy-ui/transpiled/react/Icons/Dots";
 import QualificationListItemText from "cozy-ui/transpiled/react/Viewer/Panel/QualificationListItemText";
 import { useI18n } from "cozy-ui/transpiled/react/I18n";
 var QualificationListItemInformation = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var metadataComputed = _ref.metadataComputed,
+  var formatedMetadataQualification = _ref.formatedMetadataQualification,
       toggleActionsMenu = _ref.toggleActionsMenu;
 
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
-  var name = metadataComputed.name,
-      value = metadataComputed.value;
+  var name = formatedMetadataQualification.name,
+      value = formatedMetadataQualification.value;
   return /*#__PURE__*/React.createElement(ListItem, {
     className: 'u-pl-2 u-pr-3'
   }, /*#__PURE__*/React.createElement(QualificationListItemText, {
     primary: t("Viewer.panel.qualification.information.title.".concat(name)),
-    secondary: value
+    secondary: value || t('Viewer.panel.qualification.noInfo'),
+    disabled: !value
   }), /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(IconButton, {
     ref: ref,
     onClick: function onClick() {
@@ -32,7 +33,7 @@ var QualificationListItemInformation = /*#__PURE__*/forwardRef(function (_ref, r
 });
 QualificationListItemInformation.displayName = 'QualificationListItemNumber';
 QualificationListItemInformation.propTypes = {
-  metadataComputed: PropTypes.shape({
+  formatedMetadataQualification: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.string
   }).isRequired,

package/transpiled/react/Viewer/Panel/QualificationListItemOther.js

@@ -11,7 +11,7 @@ import { useI18n } from "cozy-ui/transpiled/react/I18n";
 import MidEllipsis from "cozy-ui/transpiled/react/MidEllipsis";
 var getBoundT = models.document.locales.getBoundT;
 var QualificationListItemOther = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var metadataComputed = _ref.metadataComputed,
+  var formatedMetadataQualification = _ref.formatedMetadataQualification,
       toggleActionsMenu = _ref.toggleActionsMenu;
 
   var _useI18n = useI18n(),
@@ -19,8 +19,8 @@ var QualificationListItemOther = /*#__PURE__*/forwardRef(function (_ref, ref) {
       lang = _useI18n.lang;
 
   var scannerT = getBoundT(lang);
-  var name = metadataComputed.name,
-      value = metadataComputed.value;
+  var name = formatedMetadataQualification.name,
+      value = formatedMetadataQualification.value;
   if (!value) return null;
   var currentValueTranslated = name === 'qualification' ? scannerT("Scan.items.".concat(value)) : t("Viewer.panel.qualification.".concat(value));
   return /*#__PURE__*/React.createElement(ListItem, {
@@ -41,7 +41,7 @@ var QualificationListItemOther = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 QualificationListItemOther.displayName = 'QualificationListItemOther';
 QualificationListItemOther.propTypes = {
-  metadataComputed: PropTypes.shape({
+  formatedMetadataQualification: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.string
   }).isRequired,

package/transpiled/react/Viewer/Panel/QualificationListItemText.js

@@ -5,20 +5,25 @@ import Typography from "cozy-ui/transpiled/react/Typography";
 
 var QualificationListItemText = function QualificationListItemText(_ref) {
   var primary = _ref.primary,
-      secondary = _ref.secondary;
+      secondary = _ref.secondary,
+      disabled = _ref.disabled;
   return /*#__PURE__*/React.createElement(ListItemText, {
     disableTypography: true,
     primary: /*#__PURE__*/React.createElement(Typography, {
-      variant: 'caption'
+      variant: "caption"
     }, primary),
     secondary: /*#__PURE__*/React.createElement(Typography, {
-      variant: 'body1'
+      component: "div",
+      variant: "body1",
+      style: disabled ? {
+        color: 'var(--disabledTextColor)'
+      } : undefined
     }, secondary)
   });
 };
 
 QualificationListItemText.propTypes = {
   primary: PropTypes.string.isRequired,
-  secondary: PropTypes.string.isRequired
+  secondary: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
 };
 export default QualificationListItemText;

package/transpiled/react/Viewer/helpers.js

@@ -5,10 +5,10 @@ import has from 'lodash/has';
 import { models } from 'cozy-client';
 var isEncrypted = models.file.isEncrypted;
 export var knownDateMetadataNames = ['AObtentionDate', 'BObtentionDate', 'CObtentionDate', 'DObtentionDate', 'obtentionDate', 'expirationDate', 'referencedDate', 'issueDate', 'shootingDate', 'date', 'datetime'];
-export var knowInformationMetadataNames = ['number', 'cardNumber', 'vinNumber', 'ibanNumber', 'country'];
-export var knowOtherMetadataNames = ['contact', 'page', 'qualification'];
+export var knownInformationMetadataNames = ['number', 'cardNumber', 'vinNumber', 'ibanNumber', 'country'];
+export var knownOtherMetadataNames = ['contact', 'page', 'qualification'];
 export var getCurrentModel = function getCurrentModel(metadataName) {
-  if (knownDateMetadataNames.includes(metadataName) || knowInformationMetadataNames.includes(metadataName)) {
+  if (knownDateMetadataNames.includes(metadataName) || knownInformationMetadataNames.includes(metadataName)) {
     return 'information';
   }
 
@@ -94,52 +94,60 @@ export var downloadFile = /*#__PURE__*/function () {
 export var isFileEncrypted = function isFileEncrypted(file) {
   return isEncrypted(file);
 };
+
+var makeMetadataQualification = function makeMetadataQualification(_ref7) {
+  var metadata = _ref7.metadata,
+      knownMetadataName = _ref7.knownMetadataName,
+      value = _ref7.value;
+  var shouldReturnThisMetadata = Object.keys(metadata).includes(knownMetadataName);
+
+  if (shouldReturnThisMetadata) {
+    return {
+      name: knownMetadataName,
+      value: value || null
+    };
+  }
+};
 /**
  * @param {Object} metadata
  * @returns {{ name: string, value: string }[]} Array of formated metadata
  */
 
+
 export var formatMetadataQualification = function formatMetadataQualification(metadata) {
   var dates = knownDateMetadataNames.map(function (dateName) {
-    if (metadata[dateName]) {
-      return {
-        name: dateName,
-        value: metadata[dateName]
-      };
-    }
+    return makeMetadataQualification({
+      metadata: metadata,
+      knownMetadataName: dateName,
+      value: metadata[dateName]
+    });
   }).filter(Boolean).filter(function (data, _, arr) {
     if (arr.length > 1) return data.name !== 'datetime';
     return data;
   });
-  var numbers = knowInformationMetadataNames.map(function (numberName) {
-    if (metadata[numberName]) {
-      return {
-        name: numberName,
-        value: metadata[numberName]
-      };
-    }
+  var informations = knownInformationMetadataNames.map(function (numberName) {
+    return makeMetadataQualification({
+      metadata: metadata,
+      knownMetadataName: numberName,
+      value: metadata[numberName]
+    });
   }).filter(Boolean);
-  var others = knowOtherMetadataNames.map(function (otherName) {
-    if (otherName === 'qualification') {
-      var _metadata$otherName;
-
-      return {
-        name: otherName,
-        value: (_metadata$otherName = metadata[otherName]) === null || _metadata$otherName === void 0 ? void 0 : _metadata$otherName.label
-      };
-    }
+  var others = knownOtherMetadataNames.map(function (otherName) {
+    var _metadata$otherName;
 
-    return {
-      name: otherName,
-      value: metadata[otherName]
-    };
+    var value = otherName === 'qualification' ? (_metadata$otherName = metadata[otherName]) === null || _metadata$otherName === void 0 ? void 0 : _metadata$otherName.label : metadata[otherName];
+    return makeMetadataQualification({
+      metadata: metadata,
+      knownMetadataName: otherName,
+      value: value
+    });
   }).filter(Boolean);
-  return [].concat(_toConsumableArray(dates), _toConsumableArray(numbers), _toConsumableArray(others));
+  return [].concat(_toConsumableArray(dates), _toConsumableArray(informations), _toConsumableArray(others));
 };
-export var formatDate = function formatDate(_ref7) {
-  var f = _ref7.f,
-      lang = _ref7.lang,
-      date = _ref7.date;
+export var formatDate = function formatDate(_ref8) {
+  var f = _ref8.f,
+      lang = _ref8.lang,
+      date = _ref8.date;
 
   if (lang === 'en') {
     return f(date, 'MM/DD/YYYY');

package/transpiled/react/Viewer/hoc/withViewerLocales.js

@@ -65,6 +65,7 @@ var en = {
         front: "Front side",
         back: "Back side",
         qualification: "Qualification",
+        noInfo: "No information",
         actions: {
           copy: "Copy",
           copyClipboard: "Copy to clipboard",
@@ -157,6 +158,7 @@ var fr = {
         front: "Face avant",
         back: "Face arri\xE8re",
         qualification: "Qualification",
+        noInfo: "Non renseign\xE9(e)",
         actions: {
           copy: "Copier",
           copyClipboard: "Copier dans le presse-papier",