Add groupedMenusRef prop to menu to support better UX in a group of menu (#1606)

Author: hkbarton

packages/components/src/Menu/Menu.tsx

@@ -50,11 +50,19 @@ export interface MenuProps {
    * Use for controlled menu
    */
   setOpen?: (isOpen: boolean) => void
+
+  /**
+   * This prop exposes the groupedPopoversRef prop of the wrapped Popover component rendered by MenuList.
+   * This allows transitions between menus in a group without clicking twice
+   * (first to dismiss the current menu, and again to open the target menu)
+   */
+  groupedMenusRef?: RefObject<HTMLElement>
 }
 
 export const Menu: FC<MenuProps> = ({
   children,
   disabled,
+  groupedMenusRef,
   hoverDisclosureRef,
   id: propsID,
   isOpen: controlledIsOpen = false,
@@ -68,6 +76,7 @@ export const Menu: FC<MenuProps> = ({
 
   const context = {
     disabled,
+    groupedMenusRef,
     id,
     isOpen: isControlled.current ? controlledIsOpen : isOpen,
     setOpen: isControlled.current ? controlledSetOpen : setOpen,

packages/components/src/Menu/MenuContext.ts

@@ -24,7 +24,7 @@
 
  */
 
-import { createContext, KeyboardEvent } from 'react'
+import { createContext, KeyboardEvent, RefObject } from 'react'
 import noop from 'lodash/noop'
 
 export interface MenuContextProps {
@@ -35,6 +35,7 @@ export interface MenuContextProps {
   setOpen?: (isOpen: boolean) => void
   triggerElement?: HTMLElement | null
   triggerCallbackRef?: (node: HTMLElement | null) => void
+  groupedMenusRef?: RefObject<HTMLElement>
 }
 
 export interface MenuItemContextProps {

packages/components/src/Menu/MenuList.tsx

@@ -101,7 +101,9 @@ export const MenuListInternal = forwardRef(
     { children, compact, disabled, pin, placement, ...props }: MenuListProps,
     forwardedRef: Ref<HTMLUListElement>
   ) => {
-    const { id, isOpen, setOpen, triggerElement } = useContext(MenuContext)
+    const { groupedMenusRef, id, isOpen, setOpen, triggerElement } = useContext(
+      MenuContext
+    )
 
     const [renderIconPlaceholder, setRenderIconPlaceholder] = useState(false)
 
@@ -146,6 +148,7 @@ export const MenuListInternal = forwardRef(
     const isMenu = isOpen !== undefined
     const { popover } = usePopover({
       content: menuList,
+      groupedPopoversRef: groupedMenusRef,
       isOpen,
       pin,
       placement,

www/src/documentation/components/overlays/menu.mdx

@@ -18,6 +18,7 @@ The entire menu can be disabled via the `disabled` prop.
 - `onFocus` - and `onMouseOver` - show the tooltip
 - `onBlur` - and `onMouseOut` - hides the tooltip
 - `ref` - tooltip and popover placement
+- `groupedMenusRef` - reference to the container of a group of menu
 
 ```jsx
 <Space>
@@ -108,6 +109,37 @@ Control the state of the menu with the React `useState` hook.
 }
 ```
 
+## Grouped Menus
+
+```jsx
+;() => {
+  const containerRef = React.useRef()
+  return (
+    <Space ref={containerRef}>
+      <Menu groupedMenusRef={containerRef}>
+        <MenuDisclosure tooltip="Select your favorite kind">
+          <Button>Cheese</Button>
+        </MenuDisclosure>
+        <MenuList>
+          <MenuItem icon="FavoriteOutline">Gouda</MenuItem>
+          <MenuItem icon="FavoriteOutline">Swiss</MenuItem>
+        </MenuList>
+      </Menu>
+
+      <Menu groupedMenusRef={containerRef}>
+        <MenuDisclosure tooltip="Select your favorite pet">
+          <Button>Pet</Button>
+        </MenuDisclosure>
+        <MenuList>
+          <MenuItem icon="FavoriteOutline">Dog</MenuItem>
+          <MenuItem icon="FavoriteOutline">Cat</MenuItem>
+        </MenuList>
+      </Menu>
+    </Space>
+  )
+}
+```
+
 ## MenuList
 
 <Props of="MenuList" />