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

@@ -17,7 +17,7 @@ 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, 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,22 @@ export const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pop
   let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;
   let isHidden = useIsHidden();
 
+  // To force a menu width lower than the triggerWidth, use CSS variables.
+  let style = useMemo(() => {
+    let triggerWidth = props.style?.['--trigger-width']?.replace('px', '');
+
+    if (props.triggerRef?.current && !isNaN(Number(triggerWidth))) {
+      let triggerRect = props.triggerRef.current.getBoundingClientRect();
+      let menuWidth = triggerRect.right - triggerRect.left;
+
+      if (menuWidth > Number.parseFloat(triggerWidth)) { 
+        return {...props.style, '--trigger-width': menuWidth + 'px'}; 
+      }
+    }
+
+    return props.style;
+  }, [props.triggerRef, props.style]);
+
   // If we are in a hidden tree, we still need to preserve our children.
   if (isHidden) {
     let children = props.children;
@@ -114,6 +130,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);
   });
 });