feat(RAC): add --trigger-width to Popovers used within DialogTrigger (#7869)

* add --trigger-width to Popovers used within DialogTrigger

* add story

Author: reidbarber

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

@@ -457,6 +457,14 @@ A `Popover` can be targeted with the `.react-aria-Popover` CSS selector, or by o
 
 <StateTable properties={docs.exports.PopoverRenderProps.properties} />
 
+Within a DialogTrigger, the popover will have the `data-trigger="DialogTrigger"` attribute. 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 trigger button.
+
+```css render=false
+.react-aria-Popover[data-trigger=DialogTrigger] {
+  width: var(--trigger-width);
+}
+```
+
 ### OverlayArrow
 
 A `OverlayArrow` can be targeted with the `.react-aria-OverlayArrow` CSS selector, or by overriding with a custom `className`. It supports the following states and render props:

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

@@ -12,13 +12,13 @@
 import {AriaDialogProps, useDialog, useId, useOverlayTrigger} from 'react-aria';
 import {ButtonContext} from './Button';
 import {ContextValue, DEFAULT_SLOT, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
-import {filterDOMProps} from '@react-aria/utils';
+import {filterDOMProps, useResizeObserver} from '@react-aria/utils';
 import {forwardRefType} from '@react-types/shared';
 import {HeadingContext} from './RSPContexts';
 import {OverlayTriggerProps, OverlayTriggerState, useMenuTriggerState} from 'react-stately';
 import {PopoverContext} from './Popover';
 import {PressResponder} from '@react-aria/interactions';
-import React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, ReactNode, useCallback, useContext, useRef, useState} from 'react';
 import {RootMenuTriggerStateContext} from './Menu';
 
 export interface DialogTriggerProps extends OverlayTriggerProps {
@@ -48,6 +48,19 @@ export function DialogTrigger(props: DialogTriggerProps): ReactNode {
   let buttonRef = useRef<HTMLButtonElement>(null);
   let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state, buttonRef);
 
+  // Allows popover width to match trigger element
+  let [buttonWidth, setButtonWidth] = useState<string | null>(null);
+  let onResize = useCallback(() => {
+    if (buttonRef.current) {
+      setButtonWidth(buttonRef.current.offsetWidth + 'px');
+    }
+  }, [buttonRef]);
+
+  useResizeObserver({
+    ref: buttonRef,
+    onResize: onResize
+  });
+
   // Label dialog by the trigger as a fallback if there is no title slot.
   // This is done in RAC instead of hooks because otherwise we cannot distinguish
   // between context and props. Normally aria-labelledby overrides the title
@@ -64,7 +77,8 @@ export function DialogTrigger(props: DialogTriggerProps): ReactNode {
         [PopoverContext, {
           trigger: 'DialogTrigger',
           triggerRef: buttonRef,
-          'aria-labelledby': overlayProps['aria-labelledby']
+          'aria-labelledby': overlayProps['aria-labelledby'],
+          style: {'--trigger-width': buttonWidth} as React.CSSProperties
         }]
       ]}>
       <PressResponder {...triggerProps} ref={buttonRef} isPressed={state.isOpen}>

packages/react-aria-components/stories/Popover.stories.tsx

@@ -47,7 +47,7 @@ export const PopoverExample = () => (
       </Dialog>
     </Popover>
   </DialogTrigger>
-  );
+);
 
 
 const COUNTDOWN = 5000;
@@ -414,3 +414,22 @@ export const PopoverArrowBoundaryOffsetExample = {
     );
   }
 };
+
+export const PopoverTriggerWidthExample = () => (
+  <DialogTrigger>
+    <Button>Open popover</Button>
+    <Popover
+      placement="bottom start"
+      style={{
+        background: 'Canvas',
+        color: 'CanvasText',
+        border: '1px solid gray',
+        zIndex: 5,
+        width: 'var(--trigger-width)'
+      }}>
+      <Dialog>
+        Should match the width of the trigger button
+      </Dialog>
+    </Popover>
+  </DialogTrigger>
+);