Menu button and popover can have same width (#5465)

* Adding --trigger-width support to Menu

* removing example

Author: ktabors

packages/react-aria-components/docs/Menu.mdx

@@ -798,11 +798,11 @@ The [Popover](Popover.html) component can be targeted with the `.react-aria-Popo
 
 <StateTable properties={docs.exports.PopoverRenderProps.properties} />
 
-Within a MenuTrigger, the popover will have the `data-trigger="MenuTrigger"` attribute, which can be used to define menu-specific styles.
+Within a MenuTrigger, the popover will have the `data-trigger="MenuTrigger"` attribute, which can be used to define menu-specific styles. In addition, the `--trigger-width` CSS custom property will be set on the popover, which you can use to make the popover match the width of the menu button.
 
 ```css render=false
 .react-aria-Popover[data-trigger=MenuTrigger] {
-  /* ... */
+  width: var(--trigger-width);
 }
 ```
 

packages/react-aria-components/src/Menu.tsx

@@ -15,14 +15,14 @@ import {AriaMenuProps, mergeProps, useFocusRing, useMenu, useMenuItem, useMenuSe
 import {BaseCollection, CollectionProps, ItemRenderProps, useCachedChildren, useCollection, useSSRCollectionNode} from './Collection';
 import {MenuTriggerProps as BaseMenuTriggerProps, Node, TreeState, useMenuTriggerState, useTreeState} from 'react-stately';
 import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlot} from './utils';
-import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
+import {filterDOMProps, mergeRefs, useObjectRef, useResizeObserver} from '@react-aria/utils';
 import {Header} from './Header';
 import {Key, LinkDOMProps} from '@react-types/shared';
 import {KeyboardContext} from './Keyboard';
 import {OverlayTriggerStateContext} from './Dialog';
 import {PopoverContext} from './Popover';
 import {PressResponder} from '@react-aria/interactions';
-import React, {createContext, ForwardedRef, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef, useState} from 'react';
 import {Separator, SeparatorContext} from './Separator';
 import {TextContext} from './Text';
 
@@ -41,13 +41,30 @@ export function MenuTrigger(props: MenuTriggerProps) {
     ...props,
     type: 'menu'
   }, state, ref);
+  // Allows menu width to match button
+  let [buttonWidth, setButtonWidth] = useState<string | null>(null);
+  let onResize = useCallback(() => {
+    if (ref.current) {
+      setButtonWidth(ref.current.offsetWidth + 'px');
+    }
+  }, [ref]);
+
+  useResizeObserver({
+    ref: ref,
+    onResize: onResize
+  });
 
   return (
     <Provider
       values={[
         [MenuContext, menuProps],
         [OverlayTriggerStateContext, state],
-        [PopoverContext, {trigger: 'MenuTrigger', triggerRef: ref, placement: 'bottom start'}]
+        [PopoverContext, {
+          trigger: 'MenuTrigger',
+          triggerRef: ref,
+          placement: 'bottom start',
+          style: {'--trigger-width': buttonWidth} as React.CSSProperties
+        }]
       ]}>
       <PressResponder {...menuTriggerProps} ref={ref} isPressed={state.isOpen}>
         {props.children}