cozy-ui 74.4.1 → 74.6.0

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+# [74.6.0](https://github.com/cozy/cozy-ui/compare/v74.5.0...v74.6.0) (2022-09-12)
+
+
+### Features
+
+* Add Swap icon ([cb3dc06](https://github.com/cozy/cozy-ui/commit/cb3dc06))
+
+# [74.5.0](https://github.com/cozy/cozy-ui/compare/v74.4.2...v74.5.0) (2022-09-09)
+
+
+### Bug Fixes
+
+* Change defaultProps to Snackbar component ([c749957](https://github.com/cozy/cozy-ui/commit/c749957))
+* Disabling the Portal on the BottomSheet component in the Viewer ([35ede40](https://github.com/cozy/cozy-ui/commit/35ede40))
+* Translations of the Qualification Viewer ([489f27a](https://github.com/cozy/cozy-ui/commit/489f27a))
+
+
+### Features
+
+* Add ActionMenuWrapper component ([653e7d5](https://github.com/cozy/cozy-ui/commit/653e7d5))
+* Add arrays of known metadata names ([ab84458](https://github.com/cozy/cozy-ui/commit/ab84458))
+* Add helper for formatting all known metadata ([2fa5906](https://github.com/cozy/cozy-ui/commit/2fa5906))
+* Add QualificationListItem's components ([93f2dd1](https://github.com/cozy/cozy-ui/commit/93f2dd1))
+* Add QualificationListItem's components to Qualification ([c987346](https://github.com/cozy/cozy-ui/commit/c987346))
+* Add ViewerSnackbar component to display alerts in Viewer ([1aef68c](https://github.com/cozy/cozy-ui/commit/1aef68c))
+* Add ViewerSnackbarContext to manage internal Snackbar component ([ce4d2f1](https://github.com/cozy/cozy-ui/commit/ce4d2f1))
+* Create an alert when the attribute is copied ([ccbd467](https://github.com/cozy/cozy-ui/commit/ccbd467))
+* Implement ViewerSnackbar in ViewerContainer component ([3c5eeae](https://github.com/cozy/cozy-ui/commit/3c5eeae))
+* Move `useReferencedContactName` call to Qualification component ([39ccd6e](https://github.com/cozy/cozy-ui/commit/39ccd6e))
+* Update Viewer locales files ([f418f95](https://github.com/cozy/cozy-ui/commit/f418f95))
+
+## [74.4.2](https://github.com/cozy/cozy-ui/compare/v74.4.1...v74.4.2) (2022-09-08)
+
+
+### Bug Fixes
+
+* isLoadingContacts on useReferencedContactName hook  ([dab3e09](https://github.com/cozy/cozy-ui/commit/dab3e09))
+
 ## [74.4.1](https://github.com/cozy/cozy-ui/compare/v74.4.0...v74.4.1) (2022-09-08)
 
 

package/assets/icons/ui/swap.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 0a2 2 0 0 1 2 2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h1a2 2 0 0 1 2-2h6Zm2 12h1V4h-1v8ZM3 4v8H2V4h1Zm2-2v12h6V2H5Z"/></svg>

package/package.json

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

package/react/Icon/Readme.md

@@ -218,6 +218,7 @@ import Stack from 'cozy-ui/transpiled/react/Icons/Stack'
 import Star from 'cozy-ui/transpiled/react/Icons/Star'
 import Stats from 'cozy-ui/transpiled/react/Icons/Stats'
 import Subway from 'cozy-ui/transpiled/react/Icons/Subway'
+import Swap from 'cozy-ui/transpiled/react/Icons/Swap'
 import Sync from 'cozy-ui/transpiled/react/Icons/Sync'
 import SyncCozy from 'cozy-ui/transpiled/react/Icons/SyncCozy'
 import Tag from 'cozy-ui/transpiled/react/Icons/Tag'
@@ -437,6 +438,7 @@ const icons = [
   Star,
   Stats,
   Subway,
+  Swap,
   Sync,
   SyncCozy,
   Tag,
@@ -599,7 +601,7 @@ const icons = [
   BottomSelectIcon,
   CheckWhiteIcon,
   DashWhiteIcon,
-  KeychainIcon
+  KeychainIcon,
 ]
 
 const wrapperStyle = {
@@ -850,7 +852,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
-const availableIcons = ['album-add','album-remove','album','answer','apple','archive','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check',  'checkbox','circle-filled','clock','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh','cozy-text','credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','refresh','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway','sync-cozy','sync','tag','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check',  'checkbox','circle-filled','clock','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh','cozy-text','credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','refresh','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway', 'swap', 'sync-cozy','sync','tag','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
 ;
 <div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
   <Sprite />

package/react/Icon/icons-sprite.js

@@ -520,7 +520,7 @@ module.exports = `<svg><defs>
     <path fill-rule="evenodd" d="M8 12l-4.702 2.472.898-5.236L.392 5.528l5.257-.764L8 0l2.351 4.764 5.257.764-3.804 3.708.898 5.236z"/>
 </symbol><symbol id="stats" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M13 4h2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1M7 0h2a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1M1 8h2a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1"/>
-</symbol><symbol id="subway" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.64.64C11.2.072 9.488 0 8 0 6.512 0 4.8.072 3.36.64 1.224 1.472 0 3.24 0 5.488V16h16V5.488C16 3.24 14.776 1.472 12.64.64ZM13 5.857v5c0 1.07-.785 1.958-1.811 2.118l1.097 1.096v.358h-1.429L9.43 13H6.57l-1.428 1.429H3.714v-.358l1.097-1.096A2.143 2.143 0 0 1 3 10.857v-5C3 3.714 5.143 3 8 3s5 .714 5 2.857Zm-8.571-.714V8h7.142V5.143H4.43ZM6.57 10.5a1.071 1.071 0 1 1-2.142 0 1.071 1.071 0 0 1 2.142 0Zm3.929 1.071a1.071 1.071 0 1 0 0-2.142 1.071 1.071 0 0 0 0 2.142Z"/></symbol><symbol id="sync-cozy" viewBox="0 0 16 16">
+</symbol><symbol id="subway" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.64.64C11.2.072 9.488 0 8 0 6.512 0 4.8.072 3.36.64 1.224 1.472 0 3.24 0 5.488V16h16V5.488C16 3.24 14.776 1.472 12.64.64ZM13 5.857v5c0 1.07-.785 1.958-1.811 2.118l1.097 1.096v.358h-1.429L9.43 13H6.57l-1.428 1.429H3.714v-.358l1.097-1.096A2.143 2.143 0 0 1 3 10.857v-5C3 3.714 5.143 3 8 3s5 .714 5 2.857Zm-8.571-.714V8h7.142V5.143H4.43ZM6.57 10.5a1.071 1.071 0 1 1-2.142 0 1.071 1.071 0 0 1 2.142 0Zm3.929 1.071a1.071 1.071 0 1 0 0-2.142 1.071 1.071 0 0 0 0 2.142Z"/></symbol><symbol id="swap" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 0a2 2 0 0 1 2 2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h1a2 2 0 0 1 2-2h6Zm2 12h1V4h-1v8ZM3 4v8H2V4h1Zm2-2v12h6V2H5Z"/></symbol><symbol id="sync-cozy" viewBox="0 0 16 16">
     <g fill="none" fill-rule="evenodd">
         <g fill="#297EF1">
             <path d="M8 2c2.21 0 4 1.79 4 4 2.21 0 4 1.79 4 4s-1.79 4-4 4H4c-2.21 0-4-1.79-4-4s1.79-4 4-4c0-2.21 1.79-4 4-4zM4.6 9.014c-.12-.025-.242-.004-.345.055l-.038.024c-.042.029-.08.063-.112.104l-.012.014c-.034.047-.059.1-.074.16l-.006.04C4.008 9.441 4 9.469 4 9.5v2c0 .276.224.5.5.5.237 0 .426-.168.478-.39C5.728 12.459 6.818 13 8 13c1.547 0 2.956-.899 3.632-2.268.122-.247.02-.547-.228-.67-.248-.121-.547-.02-.67.228C10.227 11.322 9.162 12 8 12c-.74 0-1.436-.286-1.976-.754.135-.007.267-.064.36-.176.177-.212.148-.527-.064-.704l-1.5-1.25c-.005-.005-.012-.006-.017-.011l-.04-.024c-.04-.025-.08-.045-.124-.057zM8 5c-1.57 0-2.992.906-3.653 2.291-.119.25-.013.548.236.667.25.118.548.013.667-.236C5.746 6.682 6.817 6 8 6c.769 0 1.477.287 2.017.758-.149-.005-.298.048-.401.172-.177.212-.148.527.064.704l1.5 1.25.011.007c.01.008.023.013.034.02.04.028.083.05.127.063l.04.01c.054.012.11.017.163.01.005 0 .009.002.013.001.063-.01.118-.031.17-.059.014-.007.025-.016.038-.024.04-.027.076-.059.107-.097l.02-.021c.034-.047.06-.1.077-.158.003-.01.002-.02.004-.03.008-.034.016-.068.016-.106v-2c0-.276-.224-.5-.5-.5-.226 0-.41.152-.471.357C10.284 5.523 9.196 5 7.999 5z"/>

package/react/Icons/Swap.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/swap.svg` to regenerate;
+import React from 'react'
+
+function SvgSwap(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11 0a2 2 0 012 2h1a2 2 0 012 2v8a2 2 0 01-2 2h-1a2 2 0 01-2 2H5a2 2 0 01-2-2H2a2 2 0 01-2-2V4a2 2 0 012-2h1a2 2 0 012-2h6zm2 12h1V4h-1v8zM3 4v8H2V4h1zm2-2v12h6V2H5z"
+      />
+    </svg>
+  )
+}
+
+export default SvgSwap

package/react/Snackbar/Readme.md

@@ -7,6 +7,9 @@ import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import InfoIcon from 'cozy-ui/transpiled/react/Icons/Info'
+import {
+  BreakpointsProvider
+} from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 
 initialState = { open: false }
 
@@ -14,7 +17,7 @@ const handleToggle = () => {setState(state => ({ open: !state.open }))}
 
 ;
 
-<>
+<BreakpointsProvider>
   <Button
     variant="ghost"
     size="small"
@@ -34,7 +37,7 @@ const handleToggle = () => {setState(state => ({ open: !state.open }))}
     }
     onClose={handleToggle}
   />
-</>
+</BreakpointsProvider>
 ```
 
 ### With `Alert` inside the `Snackbar`
@@ -44,6 +47,9 @@ import Snackbar from 'cozy-ui/transpiled/react/Snackbar'
 import Alert from 'cozy-ui/transpiled/react/Alert'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Variants from 'cozy-ui/docs/components/Variants'
+import {
+  BreakpointsProvider
+} from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 
 initialState = { open: isTesting() }
 
@@ -54,7 +60,7 @@ const initialVariants = [{ primary: true, secondary: true, success: false, error
 
 ;
 
-<>
+<BreakpointsProvider>
   <Variants initialVariants={initialVariants} radio>
     {variant => (
       <>
@@ -77,5 +83,5 @@ const initialVariants = [{ primary: true, secondary: true, success: false, error
     label="Open snackbar"
     onClick={handleToggle}
   />
-</>
+</BreakpointsProvider>
 ```

package/react/Snackbar/index.js

@@ -1,9 +1,19 @@
 import React, { forwardRef } from 'react'
 import MuiSnackbar from '@material-ui/core/Snackbar'
+import useBreakpoints from '../hooks/useBreakpoints'
 
 const Snackbar = forwardRef(({ children, ...props }, ref) => {
+  const { isDesktop } = useBreakpoints()
+
   return (
-    <MuiSnackbar ref={ref} {...props}>
+    <MuiSnackbar
+      ref={ref}
+      anchorOrigin={{
+        vertical: !isDesktop ? 'bottom' : 'top',
+        horizontal: 'center'
+      }}
+      {...props}
+    >
       {children}
     </MuiSnackbar>
   )
@@ -12,10 +22,7 @@ const Snackbar = forwardRef(({ children, ...props }, ref) => {
 Snackbar.displayName = 'Snackbar'
 
 Snackbar.defaultProps = {
-  anchorOrigin: {
-    vertical: 'top',
-    horizontal: 'center'
-  }
+  autoHideDuration: 2000
 }
 
 export default Snackbar

package/react/Viewer/Footer/BottomSheetContent.jsx

@@ -5,7 +5,7 @@ import { BottomSheetItem } from '../../BottomSheet'
 
 import getPanelBlocks, { panelBlocksSpecs } from '../Panel/getPanelBlocks'
 
-const BottomSheetContent = ({ file, contactsFullname }) => {
+const BottomSheetContent = ({ file }) => {
   const panelBlocks = getPanelBlocks({ panelBlocksSpecs, file })
 
   return panelBlocks.map((PanelBlock, index) => (
@@ -14,7 +14,7 @@ const BottomSheetContent = ({ file, contactsFullname }) => {
       disableGutters
       disableElevation={index === panelBlocks.length - 1}
     >
-      <PanelBlock file={file} contactsFullname={contactsFullname} />
+      <PanelBlock file={file} />
     </BottomSheetItem>
   ))
 }

package/react/Viewer/Footer/FooterContent.jsx

@@ -7,7 +7,6 @@ import BottomSheet, { BottomSheetHeader } from '../../BottomSheet'
 
 import { isValidForPanel } from '../helpers'
 import BottomSheetContent from './BottomSheetContent'
-import useReferencedContactName from './useReferencedContactName'
 
 const useStyles = makeStyles(theme => ({
   footer: {
@@ -30,8 +29,6 @@ const FooterContent = ({ file, toolbarRef, children }) => {
 
   const toolbarProps = useMemo(() => ({ ref: toolbarRef }), [toolbarRef])
 
-  const { contactName, isLoadingContacts } = useReferencedContactName(file)
-
   const FooterActionButtons =
     Children.toArray(children).find(child => {
       return (
@@ -46,16 +43,18 @@ const FooterContent = ({ file, toolbarRef, children }) => {
       })
     : null
 
-  // We have to wait for the Contact request to finish before rendering `BottomSheet`, because it doesn't handle async well.
-  if (isValidForPanel({ file }) && !isLoadingContacts) {
+  if (isValidForPanel({ file })) {
     return (
-      <BottomSheet toolbarProps={toolbarProps}>
+      <BottomSheet
+        toolbarProps={toolbarProps}
+        portalProps={{ disablePortal: true }}
+      >
         <BottomSheetHeader
           className={cx('u-ph-1 u-pb-1', styles.bottomSheetHeader)}
         >
           {FooterActionButtonsWithFile}
         </BottomSheetHeader>
-        <BottomSheetContent file={file} contactsFullname={contactName} />
+        <BottomSheetContent file={file} />
       </BottomSheet>
     )
   }

package/react/Viewer/Panel/ActionMenuWrapper.jsx

@@ -0,0 +1,69 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import List from '../../MuiCozyTheme/List'
+import ListItem from '../../MuiCozyTheme/ListItem'
+import ListItemIcon from '../../MuiCozyTheme/ListItemIcon'
+import ListItemText from '../../ListItemText'
+import Icon from '../../Icon'
+import Copy from '../../Icons/Copy'
+import BottomSheet, { BottomSheetItem } from '../../BottomSheet'
+import ActionMenu, { ActionMenuItem } from '../../ActionMenu'
+import Typography from '../../Typography'
+import useBreakpoints from '../../hooks/useBreakpoints'
+import { useI18n } from '../../I18n'
+import useViewerSnackbar from '../snackbar/ViewerSnackbarProvider'
+
+const ActionMenuWrapper = forwardRef(({ onClose, value }, ref) => {
+  const { isMobile } = useBreakpoints()
+  const { t } = useI18n()
+  const { showViewerSnackbar } = useViewerSnackbar()
+
+  const handleCopy = () => {
+    if (navigator?.clipboard) {
+      navigator.clipboard.writeText(value)
+      showViewerSnackbar(
+        'secondary',
+        t(`Viewer.snackbar.copiedToClipboard.success`)
+      )
+    } else {
+      showViewerSnackbar('error', t(`Viewer.snackbar.copiedToClipboard.error`))
+    }
+    onClose()
+  }
+
+  if (isMobile) {
+    return (
+      <BottomSheet backdrop onClose={onClose}>
+        <BottomSheetItem disableGutters>
+          <List>
+            <ListItem button onClick={handleCopy}>
+              <ListItemIcon>
+                <Icon icon={Copy} />
+              </ListItemIcon>
+              <ListItemText
+                primary={t(`Viewer.panel.qualification.actions.copyClipboard`)}
+              />
+            </ListItem>
+          </List>
+        </BottomSheetItem>
+      </BottomSheet>
+    )
+  }
+
+  return (
+    <ActionMenu onClose={onClose} anchorElRef={ref}>
+      <ActionMenuItem onClick={handleCopy} left={<Icon icon={Copy} />}>
+        <Typography>{t(`Viewer.panel.qualification.actions.copy`)}</Typography>
+      </ActionMenuItem>
+    </ActionMenu>
+  )
+})
+ActionMenuWrapper.displayName = 'ActionMenuWrapper'
+
+ActionMenuWrapper.propTypes = {
+  onClose: PropTypes.func,
+  value: PropTypes.string
+}
+
+export default ActionMenuWrapper

package/react/Viewer/Panel/Qualification.jsx

@@ -1,84 +1,107 @@
-import React from 'react'
+import React, { useRef, useState, createRef, useMemo, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
-import { models } from 'cozy-client'
-
 import List from '../../MuiCozyTheme/List'
-import ListItem from '../../MuiCozyTheme/ListItem'
-import QualificationListItemText from './QualificationListItemText'
 import { withViewerLocales } from '../withViewerLocales'
-import MidEllipsis from '../../MidEllipsis'
+import {
+  formatMetadataQualification,
+  knownDateMetadataNames,
+  knowNumberMetadataNames,
+  knowOtherMetadataNames
+} from '../helpers'
+import QualificationListItemContact from './QualificationListItemContact'
+import ActionMenuWrapper from './ActionMenuWrapper'
+import QualificationListItemDate from './QualificationListItemDate'
+import QualificationListItemNumber from './QualificationListItemNumber'
+import QualificationListItemOther from './QualificationListItemOther'
+
+const Qualification = ({ file = {} }) => {
+  const { metadata = {} } = file
+  const actionBtnRef = useRef([])
+  const [optionFile, setOptionFile] = useState({
+    isOpen: false,
+    id: '',
+    value: ''
+  })
+
+  const hideActionsMenu = () => {
+    setOptionFile({ isOpen: false, id: '', value: '' })
+  }
 
-const {
-  document: {
-    locales: { getBoundT }
+  const toggleActionsMenu = (id, value) => {
+    setOptionFile(prev => {
+      if (prev.isOpen) return { isOpen: false, id: '', value: '' }
+      return { isOpen: true, id, value }
+    })
   }
-} = models
 
-const Qualification = ({ file = {}, contactsFullname, t, f, lang }) => {
-  const scannerT = getBoundT(lang)
+  const metadataComputed = useMemo(() => {
+    return formatMetadataQualification(metadata)
+  }, [metadata])
 
-  const { name: filename, metadata = {} } = file
-  const {
-    qualification = {},
-    page: pageLabel,
-    datetime,
-    datetimeLabel
-  } = metadata
+  useEffect(() => {
+    actionBtnRef.current = metadataComputed.map(
+      (_, idx) => actionBtnRef.current[idx] ?? createRef()
+    )
+  }, [metadataComputed])
 
   return (
     <List className={'u-pv-1'}>
-      {datetime && (
-        <ListItem className={'u-ph-2'}>
-          <QualificationListItemText
-            primary={t(
-              `Viewer.panel.qualification.date.title.${
-                datetimeLabel === 'datetime' || datetimeLabel === undefined
-                  ? 'addedOn'
-                  : datetimeLabel
-              }`
-            )}
-            secondary={f(datetime, 'DD/MM/YYYY')}
-          />
-        </ListItem>
-      )}
-      {contactsFullname && (
-        <ListItem className={'u-ph-2'}>
-          <QualificationListItemText
-            primary={t('Viewer.panel.qualification.identity')}
-            secondary={contactsFullname}
-          />
-        </ListItem>
-      )}
-      <ListItem className={'u-ph-2'}>
-        <QualificationListItemText
-          primary={t('Viewer.panel.qualification.label.title')}
-          secondary={
-            <MidEllipsis
-              text={
-                pageLabel
-                  ? t(`Viewer.panel.qualification.label.${pageLabel}`)
-                  : filename
-              }
+      {metadataComputed.map((meta, idx) => {
+        const { name } = meta
+
+        if (knownDateMetadataNames.includes(name)) {
+          return (
+            <QualificationListItemDate
+              key={idx}
+              ref={actionBtnRef.current[idx]}
+              metadataComputed={meta}
+              toggleActionsMenu={val => toggleActionsMenu(idx, val)}
             />
+          )
+        }
+
+        if (knowNumberMetadataNames.includes(name)) {
+          return (
+            <QualificationListItemNumber
+              key={idx}
+              ref={actionBtnRef.current[idx]}
+              metadataComputed={meta}
+              toggleActionsMenu={val => toggleActionsMenu(idx, val)}
+            />
+          )
+        }
+
+        if (knowOtherMetadataNames.includes(name)) {
+          if (name === 'owner') {
+            return <QualificationListItemContact key={idx} file={file} />
           }
+
+          return (
+            <QualificationListItemOther
+              key={idx}
+              ref={actionBtnRef.current[idx]}
+              filename={file.name}
+              metadataComputed={meta}
+              toggleActionsMenu={val => toggleActionsMenu(idx, val)}
+            />
+          )
+        }
+      })}
+
+      {optionFile.isOpen && (
+        <ActionMenuWrapper
+          onClose={hideActionsMenu}
+          value={optionFile.value}
+          ref={actionBtnRef.current[optionFile.id]}
         />
-      </ListItem>
-      <ListItem className={'u-ph-2'}>
-        <QualificationListItemText
-          primary={t('Viewer.panel.qualification.qualification')}
-          secondary={scannerT(`Scan.items.${qualification.label}`)}
-        />
-      </ListItem>
+      )}
     </List>
   )
 }
 
 Qualification.propTypes = {
-  file: PropTypes.object.isRequired,
-  t: PropTypes.func.isRequired,
-  f: PropTypes.func.isRequired,
-  lang: PropTypes.string.isRequired
+  file: PropTypes.object
 }
 
-export default withViewerLocales(Qualification)
+export default withViewerLocales(React.memo(Qualification))

package/react/Viewer/Panel/QualificationListItemContact.jsx

@@ -0,0 +1,76 @@
+import React, { useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+
+import ListItem from '../../MuiCozyTheme/ListItem'
+import ListItemSecondaryAction from '../../MuiCozyTheme/ListItemSecondaryAction'
+import IconButton from '../../IconButton'
+import Icon from '../../Icon'
+import Dots from '../../Icons/Dots'
+import QualificationListItemText from './QualificationListItemText'
+import Spinner from '../../Spinner'
+import useReferencedContactName from '../hooks/useReferencedContactName'
+import { useI18n } from '../../I18n'
+import ActionMenuWrapper from './ActionMenuWrapper'
+
+const QualificationListItemContact = ({ file }) => {
+  const { t } = useI18n()
+  const actionBtnRef = useRef()
+  const [optionFile, setOptionFile] = useState({
+    isOpen: false,
+    value: ''
+  })
+
+  const hideActionsMenu = () => setOptionFile({ isOpen: false, value: '' })
+  const toggleActionsMenu = value =>
+    setOptionFile(prev => {
+      if (prev.isOpen) return { isOpen: false, value: '' }
+      return { isOpen: true, value }
+    })
+
+  const { contactName, isLoadingContacts } = useReferencedContactName(file)
+
+  if (isLoadingContacts) {
+    return (
+      <ListItem className={'u-pl-2 u-pr-3'}>
+        <Spinner color="var(--secondaryTextColor)" />
+      </ListItem>
+    )
+  }
+
+  if (!isLoadingContacts && !contactName) {
+    return null
+  }
+
+  return (
+    <>
+      <ListItem className={'u-ph-2'}>
+        <QualificationListItemText
+          primary={t('Viewer.panel.qualification.owner')}
+          secondary={contactName}
+        />
+        <ListItemSecondaryAction>
+          <IconButton
+            ref={actionBtnRef}
+            onClick={() => toggleActionsMenu(contactName)}
+          >
+            <Icon icon={Dots} />
+          </IconButton>
+        </ListItemSecondaryAction>
+      </ListItem>
+
+      {optionFile.isOpen && (
+        <ActionMenuWrapper
+          onClose={hideActionsMenu}
+          value={optionFile.value}
+          ref={actionBtnRef}
+        />
+      )}
+    </>
+  )
+}
+
+QualificationListItemContact.propTypes = {
+  file: PropTypes.object.isRequired
+}
+
+export default QualificationListItemContact

package/react/Viewer/Panel/QualificationListItemDate.jsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import ListItem from '../../MuiCozyTheme/ListItem'
+import ListItemSecondaryAction from '../../MuiCozyTheme/ListItemSecondaryAction'
+import IconButton from '../../IconButton'
+import Icon from '../../Icon'
+import Dots from '../../Icons/Dots'
+import QualificationListItemText from './QualificationListItemText'
+import { useI18n } from '../../I18n'
+import { formatDate } from '../helpers'
+
+const QualificationListItemDate = forwardRef(
+  ({ metadataComputed, toggleActionsMenu }, ref) => {
+    const { t, f, lang } = useI18n()
+    const { name, value } = metadataComputed
+    const formattedDate = formatDate({ f, lang, date: value })
+
+    return (
+      <ListItem className={'u-pl-2 u-pr-3'}>
+        <QualificationListItemText
+          primary={t(`Viewer.panel.qualification.date.title.${name}`)}
+          secondary={formattedDate}
+        />
+        <ListItemSecondaryAction>
+          <IconButton
+            ref={ref}
+            onClick={() => toggleActionsMenu(formattedDate)}
+          >
+            <Icon icon={Dots} />
+          </IconButton>
+        </ListItemSecondaryAction>
+      </ListItem>
+    )
+  }
+)
+QualificationListItemDate.displayName = 'QualificationListItemDate'
+
+QualificationListItemDate.propTypes = {
+  metadataComputed: PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.string
+  }).isRequired,
+  toggleActionsMenu: PropTypes.func.isRequired
+}
+
+export default QualificationListItemDate