feat: Replace the last depreciated ActionMenu's

src/modules/breadcrumb/components/DesktopBreadcrumb.jsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react'
 
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
 import BreadcrumbMui from 'cozy-ui/transpiled/react/Breadcrumbs'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import FolderIcon from 'cozy-ui/transpiled/react/Icons/Folder'
 import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
-import ActionMenu, {
-  ActionMenuItem
-} from 'cozy-ui/transpiled/react/deprecated/ActionMenu'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import IconServer from 'assets/icons/icon-server.svg'
@@ -28,13 +28,15 @@ const DesktopBreadcrumb = ({ onBreadcrumbClick, path }) => {
   )
   const [menuDisplayed, setMenuDisplayed] = useState(false)
 
+  const closeMenu = () => setMenuDisplayed(false)
+
   const handleDropdownTriggerClick = e => {
     e.stopPropagation()
     setMenuDisplayed(true)
   }
 
   useEffect(() => {
-    setMenuDisplayed(false)
+    closeMenu()
     setDropdownTrigger(document.querySelector(`[aria-label="${expandText}"]`))
   }, [path]) // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -43,7 +45,7 @@ const DesktopBreadcrumb = ({ onBreadcrumbClick, path }) => {
     if (trigger) {
       trigger.addEventListener('click', handleDropdownTriggerClick)
       return () => {
-        setMenuDisplayed(false)
+        closeMenu()
         trigger.removeEventListener('click', handleDropdownTriggerClick)
       }
     }
@@ -115,36 +117,29 @@ const DesktopBreadcrumb = ({ onBreadcrumbClick, path }) => {
       </BreadcrumbMui>
 
       {menuDisplayed && (
-        <ActionMenu
-          anchorElRef={anchorElRef}
-          autoclose={true}
-          onClose={() => {
-            setMenuDisplayed(false)
-          }}
-          popperOptions={{
-            placement: 'bottom-end',
-            modifiers: [
-              {
-                name: 'offset',
-                options: {
-                  offset: [0, 10]
-                }
-              }
-            ]
+        <ActionsMenu
+          open
+          ref={anchorElRef}
+          onClose={closeMenu}
+          actions={[]}
+          docs={[]}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left'
           }}
         >
           {path.slice(1, -2).map(breadcrumbPath => (
-            <ActionMenuItem
+            <ActionsMenuItem
               key={breadcrumbPath.name}
               onClick={e => {
                 e.stopPropagation()
                 onBreadcrumbClick(breadcrumbPath)
               }}
             >
-              {breadcrumbPath.name}
-            </ActionMenuItem>
+              <ListItemText primary={breadcrumbPath.name} />
+            </ActionsMenuItem>
           ))}
-        </ActionMenu>
+        </ActionsMenu>
       )}
     </>
   )

src/modules/drive/AddMenu/AddMenu.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
 
 import flag from 'cozy-flags'
-import Typography from 'cozy-ui/transpiled/react/Typography'
-import ActionMenu from 'cozy-ui/transpiled/react/deprecated/ActionMenu'
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
+import ActionsMenuMobileHeader from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuMobileHeader'
+import Divider from 'cozy-ui/transpiled/react/Divider'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
@@ -23,25 +25,27 @@ export const ActionMenuContent = ({
   refreshFolderContent,
   isPublic,
   isEncryptedFolder,
-  displayedFolder
+  displayedFolder,
+  onClick
 }) => {
   const { t } = useI18n()
-  const { isMobile, isDesktop } = useBreakpoints()
+  const { isDesktop } = useBreakpoints()
   const { hasScanner } = useScannerContext()
 
   return (
     <>
-      {isMobile && (
-        <>
-          <Typography variant="h6" className="u-p-1">
-            {t('toolbar.menu_add')}
-          </Typography>
-          <hr />
-        </>
+      <ActionsMenuMobileHeader>
+        <ListItemText
+          primary={t('toolbar.menu_add')}
+          primaryTypographyProps={{ variant: 'h6' }}
+        />
+      </ActionsMenuMobileHeader>
+
+      {canCreateFolder && !isEncryptedFolder && (
+        <AddFolderItem onClick={onClick} />
       )}
-      {canCreateFolder && !isEncryptedFolder && <AddFolderItem />}
       {canCreateFolder && !isPublic && flag('drive.enable-encryption') && (
-        <AddEncryptedFolderItem />
+        <AddEncryptedFolderItem onClick={onClick} />
       )}
       {!isPublic && !isEncryptedFolder && (
         <CreateNoteItem displayedFolder={displayedFolder} />
@@ -54,17 +58,18 @@ export const ActionMenuContent = ({
         </>
       )}
       {!isEncryptedFolder && (
-        <CreateShortcut onCreated={refreshFolderContent} />
+        <CreateShortcut onCreated={refreshFolderContent} onClick={onClick} />
       )}
-      {canUpload && <hr />}
+      {canUpload && <Divider className="u-mv-half" />}
       {canUpload && (
         <UploadItem
           disabled={isDisabled}
           onUploaded={refreshFolderContent}
           displayedFolder={displayedFolder}
+          onClick={onClick}
         />
       )}
-      {hasScanner && <ScannerMenuItem />}
+      {hasScanner && <ScannerMenuItem onClick={onClick} />}
     </>
   )
 }
@@ -82,13 +87,12 @@ const AddMenu = ({
   ...actionMenuProps
 }) => {
   return (
-    <ActionMenu
-      anchorElRef={anchorRef}
+    <ActionsMenu
+      open
+      ref={anchorRef}
       onClose={handleClose}
-      autoclose={true}
-      popperOptions={{
-        strategy: 'fixed'
-      }}
+      docs={[displayedFolder]}
+      actions={[]}
       {...actionMenuProps}
     >
       <ActionMenuContent
@@ -99,8 +103,9 @@ const AddMenu = ({
         isPublic={isPublic}
         isEncryptedFolder={isEncryptedFolder}
         displayedFolder={displayedFolder}
+        onClick={handleClose}
       />
-    </ActionMenu>
+    </ActionsMenu>
   )
 }
 

src/modules/drive/Toolbar/components/AddEncryptedFolderItem.jsx

@@ -2,24 +2,30 @@ import React from 'react'
 import { connect } from 'react-redux'
 
 import { useVaultUnlockContext } from 'cozy-keys-lib'
-import { ActionMenuItem } from 'cozy-ui/transpiled/react/deprecated/ActionMenu'
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { showNewFolderInput, encryptedFolder } from 'modules/filelist/duck'
 import EncryptedFolderIcon from 'modules/views/Folder/EncryptedFolderIcon'
 
-const AddEncryptedFolderItem = ({ addEncryptedFolder }) => {
+const AddEncryptedFolderItem = ({ addEncryptedFolder, onClick }) => {
   const { t } = useI18n()
   const { showUnlockForm } = useVaultUnlockContext()
 
+  const handleClick = () => {
+    showUnlockForm({ onUnlock: addEncryptedFolder })
+    onClick()
+  }
+
   return (
-    <ActionMenuItem
+    <ActionsMenuItem
       data-testid="add-encrypted-folder-link"
-      onClick={() => showUnlockForm({ onUnlock: addEncryptedFolder })}
-      left={<EncryptedFolderIcon width={16} height={16} />}
+      onClick={handleClick}
     >
-      {t('toolbar.menu_new_encrypted_folder')}
-    </ActionMenuItem>
+      <EncryptedFolderIcon width={16} height={16} />
+      <ListItemText primary={t('toolbar.menu_new_encrypted_folder')} />
+    </ActionsMenuItem>
   )
 }
 

src/modules/drive/Toolbar/components/AddFolderItem.jsx

@@ -1,22 +1,28 @@
 import React from 'react'
 import { connect } from 'react-redux'
 
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconFolder from 'cozy-ui/transpiled/react/Icons/FileTypeFolder'
-import { ActionMenuItem } from 'cozy-ui/transpiled/react/deprecated/ActionMenu'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { showNewFolderInput } from 'modules/filelist/duck'
 
-const AddFolderItem = translate()(({ t, addFolder }) => {
+const AddFolderItem = translate()(({ t, addFolder, onClick }) => {
+  const handleClick = () => {
+    addFolder()
+    onClick()
+  }
+
   return (
-    <ActionMenuItem
-      data-testid="add-folder-link"
-      onClick={addFolder}
-      left={<Icon icon={IconFolder} />}
-    >
-      {t('toolbar.menu_new_folder')}
-    </ActionMenuItem>
+    <ActionsMenuItem data-testid="add-folder-link" onClick={handleClick}>
+      <ListItemIcon>
+        <Icon icon={IconFolder} />
+      </ListItemIcon>
+      <ListItemText primary={t('toolbar.menu_new_folder')} />
+    </ActionsMenuItem>
   )
 })
 const mapDispatchToProps = dispatch => ({

src/modules/drive/Toolbar/components/AddMenuItem.jsx

@@ -1,13 +1,15 @@
 import React, { useContext } from 'react'
 
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
-import { ActionMenuItem } from 'cozy-ui/transpiled/react/deprecated/ActionMenu'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { AddMenuContext } from 'modules/drive/AddMenu/AddMenuProvider'
 
-const AddMenuItem = () => {
+const AddMenuItem = ({ onClick }) => {
   const { t } = useI18n()
 
   const {
@@ -19,18 +21,24 @@ const AddMenuItem = () => {
     a11y
   } = useContext(AddMenuContext)
 
+  const handleClick = () => {
+    isOffline ? handleOfflineClick() : handleToggle()
+    onClick()
+  }
+
   return (
-    <div ref={anchorRef} onClick={isOffline ? handleOfflineClick : undefined}>
-      <ActionMenuItem
-        left={<Icon icon={PlusIcon} />}
-        disabled={isDisabled || isOffline}
-        icon={PlusIcon}
-        onClick={handleToggle}
-        {...a11y}
-      >
-        {t('toolbar.menu_add_item')}
-      </ActionMenuItem>
-    </div>
+    <ActionsMenuItem
+      ref={anchorRef}
+      isListItem
+      disabled={isDisabled || isOffline}
+      onClick={handleClick}
+      {...a11y}
+    >
+      <ListItemIcon>
+        <Icon icon={<Icon icon={PlusIcon} />} />
+      </ListItemIcon>
+      <ListItemText primary={t('toolbar.menu_add_item')} />
+    </ActionsMenuItem>
   )
 }