feat: auto-adjust menu width for custom triggers

packages/@react-aria/collections/src/Hidden.tsx

@@ -12,7 +12,7 @@
 
 import {createPortal} from 'react-dom';
 import {forwardRefType} from '@react-types/shared';
-import React, {createContext, forwardRef, ReactElement, ReactNode, useContext} from 'react';
+import React, {createContext, forwardRef, ReactElement, ReactNode, useContext, useMemo} from 'react';
 import {useIsSSR} from '@react-aria/ssr';
 
 // React doesn't understand the <template> element, which doesn't have children like a normal element.
@@ -43,6 +43,8 @@ const hiddenFragment = typeof DocumentFragment !== 'undefined' ? new DocumentFra
 export function Hidden(props: {children: ReactNode}) {
   let isHidden = useContext(HiddenContext);
   let isSSR = useIsSSR();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  let wasSSR = useMemo(() => isSSR, []);
   if (isHidden) {
     // Don't hide again if we are already hidden.
     return <>{props.children}</>;
@@ -57,7 +59,7 @@ export function Hidden(props: {children: ReactNode}) {
   // In SSR, portals are not supported by React. Instead, render into a <template>
   // element, which the browser will never display to the user. In addition, the
   // content is not part of the DOM tree, so it won't affect ids or other accessibility attributes.
-  return isSSR
+  return wasSSR
     ? <template data-react-aria-hidden>{children}</template>
     : createPortal(children, hiddenFragment!);
 }

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

@@ -12,12 +12,12 @@
 
 import {AriaPopoverProps, DismissButton, Overlay, PlacementAxis, PositionProps, usePopover} from 'react-aria';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
-import {filterDOMProps, mergeProps, useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, useEnterAnimation, useExitAnimation, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {forwardRefType, RefObject} from '@react-types/shared';
 import {OverlayArrowContext} from './OverlayArrow';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
 import {OverlayTriggerStateContext} from './Dialog';
-import React, {createContext, ForwardedRef, forwardRef, useContext, useRef, useState} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, useCallback, useContext, useMemo, useRef, useState} from 'react';
 import {useIsHidden} from '@react-aria/collections';
 
 export interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'offset' | 'arrowSize'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps {
@@ -91,6 +91,27 @@ export const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pop
   let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;
   let isHidden = useIsHidden();
 
+  // We can set minWidth to the trigger width as a courtesy for custom trigger elements.
+  let triggerWidth = Number.parseFloat(props.style?.['--trigger-width']);
+  let [menuWidth, setMenuWidth] = useState(triggerWidth || 0);
+
+  let onResize = useCallback(() => {
+    if (props.triggerRef?.current) {
+      let triggerRect = props.triggerRef.current.getBoundingClientRect();
+      setMenuWidth(triggerRect.right - triggerRect.left);
+    }
+  }, [props.triggerRef]);
+
+  useResizeObserver({
+    ref: props.triggerRef,
+    onResize: onResize
+  });
+
+  let style = useMemo(() => ({
+    minWidth: menuWidth + 'px', 
+    ...props.style
+  }), [menuWidth, props.style]);
+
   // If we are in a hidden tree, we still need to preserve our children.
   if (isHidden) {
     let children = props.children;
@@ -114,6 +135,7 @@ export const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pop
   return (
     <PopoverInner
       {...props}
+      style={style}
       triggerRef={props.triggerRef!}
       state={state}
       popoverRef={ref}

packages/react-aria-components/test/ComboBox.ssr.test.js

@@ -92,6 +92,7 @@ describe('ComboBox SSR', function () {
     let [button, button2] = buttons;
     fireEvent.click(button2);
     expect(button2.textContent).toBe('1');
-    expect(button.textContent.split(', ')[2]).toBe(button.textContent.split(', ')[1]);
+    let [, first, second] = button.textContent.split(', ');
+    expect(first.replace(/ aria-describedby="[^"]*"/, '')).toBe(second);
   });
 });