Create callback in ActionMenu to get menu direction

[cagesellchen]

What

Add a callback to the ActionMenu component that returns the direction the dropdown menu will appear (above the anchor, below it, left, right)

Why

This will allow consumers of the component to change the order of the list based on the direction the menu will appear. Today, there's no way to accurately determine this.

Usage Example:

In Copilot Immersive, there's an ActionMenu for retrying a Copilot response. When clicked, the options in the dropdown are the various LLMs the user can retry with. There's an additional option, "Try again", which retries with the existing model. The "Try again" option is the one most selected, so it's important to keep it close to the button.

Below	Above

Today, putting the "Try again" option at the beginning or end of the item list is roughly calculated based on the position of the button on the screen:

useEffect(() => {
  // Calculate whether the menu will drop up or drop down.
  // This is so we can dynamically put the "Try again" option closest to the button.
  // Note: this isn't fully accurate for every screen size, but it's close, and preferable to a fixed item ordering.
  if (componentRef.current) {
    const rect = componentRef.current.getBoundingClientRect()
    setMenuDirection(rect.bottom > window.innerHeight / 1.55 ? 'up' : 'down')
  }
}, [menuDirection])

But this calculation isn't accurate for all screen sizes, which is why we want the ability to get the menu direction directly from the component.

[cagesellchen]

@TylerJDev what's the status of this work? Is it still planned?

[TylerJDev]

Hey @cagesellchen! Sorry for the delay on this one, should be resolved in #5910 which I'm actively working on! I just pushed some changes, so hopefully we'll get it merged in soon! 😁

[TylerJDev]

@cagesellchen, this should be available in v37.24.0, which will release either this week or sometime next week!