diff --git a/react/ActionMenu/Readme.md b/react/ActionMenu/Readme.md
index 7134425ad2..fe902651e8 100644
--- a/react/ActionMenu/Readme.md
+++ b/react/ActionMenu/Readme.md
@@ -74,3 +74,37 @@ const hideMenu = () => setState({ menuDisplayed: false });
}
```
+
+### Placement
+
+The `placement` and `anchorElRef` prop can be used to control the placement of the menu on desktop. `anchorElRef` should be a ref to a DOM element and not a react component.
+
+```
+import ActionMenu, { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu';
+import Icon from 'cozy-ui/transpiled/react/Icon';
+
+const testRef = React.createRef();
+
+initialState = { menuDisplayed: isTesting() };
+
+const showMenu = () => setState({ menuDisplayed: true });
+const hideMenu = () => setState({ menuDisplayed: false });
+
+const anchorRef = React.createRef();
+
+
+
+ {state.menuDisplayed &&
+
+ }>Item 1
+ }
+
+```
+
+### preventOverflow
+
+Set `preventOverflow` to `true` to keep the ActionMenu visible on desktop, even if `anchorElRef` is outside the viewport.
diff --git a/react/ActionMenu/index.jsx b/react/ActionMenu/index.jsx
index 33a26c869e..e7dba02499 100644
--- a/react/ActionMenu/index.jsx
+++ b/react/ActionMenu/index.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
import PropTypes from 'prop-types'
import cx from 'classnames'
import ClickAwayListener from '@material-ui/core/ClickAwayListener'
@@ -6,29 +6,58 @@ import styles from './styles.styl'
import { Media, Bd, Img } from '../Media'
import BottomDrawer from '../BottomDrawer'
import withBreakpoints from '../helpers/withBreakpoints'
+import Popper from '@material-ui/core/Popper'
-const ActionMenuWrapper = ({ inline, onClose, children }) =>
- inline ? (
- {children}
+const ActionMenuWrapper = ({
+ inline,
+ onClose,
+ anchorElRef,
+ placement,
+ preventOverflow,
+ children
+}) => {
+ const getAnchorElement = useCallback(() => {
+ return anchorElRef.current
+ }, [anchorElRef])
+ const normalOverflowModifiers = {
+ preventOverflow: { enabled: false },
+ hide: { enabled: false }
+ }
+
+ return inline ? (
+
+ {children}
+
) : (
{children}
)
+}
const ActionMenu = ({
children,
className,
onClose,
+ placement,
+ preventOverflow,
+ anchorElRef,
breakpoints: { isDesktop }
}) => {
const shouldDisplayInline = isDesktop
+ const containerRef = React.createRef()
return (
-
```
+
+#### `position` and `popover`
+
+`ActionMenu` relies on the Material-UI (Popover)[https://v3.material-ui.com/utils/popper/] component to handle both `position` and `popover`.
+
+- `position='left'` is now `placement='bottom-start'`, and is still the default behavior.
+- `position='right'` is now `placement='bottom-end'`.
+- All other Popover.js placement options are also supported
+- The Menu `popover` prop is now called `preventOverflow`
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
index 680741141c..2aa8fa9c52 100644
--- a/react/__snapshots__/examples.spec.jsx.snap
+++ b/react/__snapshots__/examples.spec.jsx.snap
@@ -3,7 +3,7 @@
exports[`ActionMenu should render examples: ActionMenu 1`] = `
"